:root {
	--b3d-brand: #000F99;
	--b3d-brand-dark: #1D174B;
	--b3d-lime: #A4C63A;
	--b3d-ink: #1f2333;
	--b3d-ink-soft: #5b6172;
	--b3d-panel: rgba(255, 255, 255, 0.94);
	--b3d-line: rgba(31, 35, 51, 0.12);
	--b3d-danger: #c62828;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: var(--b3d-ink);
	background: #e8ecf6;
	-webkit-font-smoothing: antialiased;
}

.b3d { position: fixed; inset: 0; }

.b3d-scene { position: absolute; inset: 0; touch-action: none; }
.b3d-scene canvas { display: block; width: 100%; height: 100%; }

.b3d-panel {
	position: absolute;
	background: var(--b3d-panel);
	border: 1px solid var(--b3d-line);
	border-radius: 14px;
	box-shadow: 0 8px 28px rgba(16, 22, 60, 0.14);
	backdrop-filter: blur(6px);
}

/* ---- Pasek narzędzi (v3.1: marka, Cofnij / Ponów, menu Projekt / Widok / Dla nauczyciela, Pomoc, Fizyka) ---- */

.b3d-toolbar {
	top: 14px;
	left: 14px;
	/* Miejsce na listę części po prawej (inaczej ostatnie przyciski chowają się pod nią). */
	max-width: calc(100% - 28px - 290px);
	padding: 8px 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.b3d-brand { font-weight: 800; font-size: 17px; color: var(--b3d-brand); letter-spacing: 0.02em; white-space: nowrap; padding: 0 2px; }
a.b3d-brand { text-decoration: none; border-radius: 8px; }
a.b3d-brand:hover b { text-decoration: underline; text-underline-offset: 3px; }
a.b3d-brand:focus-visible { outline: 3px solid var(--b3d-brand-dark); outline-offset: 2px; }
.b3d-brand span { color: var(--b3d-lime); }
/* SCUBE kreator (2026-10-22): „SCUBE” nad mniejszym „KREATOR” — zwarty znak, pasek w jednym rzędzie. */
.b3d-brand.is-stacked { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 1px; }
.b3d-brand.is-stacked b { font-size: 17px; font-weight: 800; letter-spacing: 0.04em; }
.b3d-brand.is-stacked span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #4c650b; }

.b3d-tools { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.b3d-ibtn,
.b3d-phys__toggle { display: inline-flex; align-items: center; gap: 6px; }
.b3d-ibtn svg,
.b3d-phys__toggle svg,
.b3d-menubar__btn svg { flex: none; }
/* „Menu” zbiera grupy tylko na wąskim ekranie; na szerszym <details> jest stale otwarte, bez przycisku. */
.b3d-menubar { position: relative; }
.b3d-menubar > summary { display: none; }
.b3d-menubar__items { flex-wrap: nowrap; }
.b3d-tools--end { flex-wrap: nowrap; }
.b3d-tools--end:not(:has(> :not([hidden]))) { display: none; }

.b3d-tools button,
.b3d-act,
.b3d-float button,
.b3d-share-panel button,
.b3d-first {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--b3d-brand-dark);
	background: #fff;
	border: 1px solid var(--b3d-line);
	border-radius: 9px;
	padding: 6px 11px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}
.b3d-tools button:hover:not(:disabled) { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-tools button:disabled { opacity: 0.4; cursor: default; }
.b3d-tools button[aria-pressed="true"],
.b3d-tools button[aria-pressed="true"]:hover { background: var(--b3d-brand); color: #fff; border-color: var(--b3d-brand); }
.b3d-tools button.is-danger { color: var(--b3d-danger); }
.b3d-tools button[hidden] { display: none; }
.b3d-tools button:focus-visible,
.b3d-part:focus-visible,
.b3d-swatch:focus-visible,
.b3d-first:focus-visible,
.b3d-first-ex:focus-visible,
.b3d-act:focus-visible,
.b3d-float button:focus-visible,
.b3d-dir:focus-visible,
.b3d-share-panel button:focus-visible,
.b3d-share-panel__input:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }

.b3d-colors { display: flex; flex-wrap: wrap; gap: 5px; max-width: 100%; }
.b3d-swatch {
	width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
	background: var(--c); border: 2px solid rgba(0, 0, 0, 0.15); padding: 0;
}
.b3d-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b3d-brand); }

/* ---- Lista części ---- */

.b3d-parts {
	top: 14px;
	right: 14px;
	min-width: 210px;
	max-width: 280px;
	padding: 12px 14px;
}
.b3d-parts summary {
	display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
	margin: 0 0 6px; cursor: pointer; list-style: none;
}
.b3d-parts summary::-webkit-details-marker { display: none; }
.b3d-parts summary::after { content: '▾'; font-size: 12px; color: var(--b3d-ink-soft); }
.b3d-parts details:not([open]) summary { margin: 0; }
.b3d-parts details:not([open]) summary::after { content: '▸'; }
.b3d-parts summary:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; border-radius: 4px; }
.b3d-parts__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--b3d-ink-soft); }
.b3d-parts__count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--b3d-brand); font-variant-numeric: tabular-nums; }
.b3d-parts details[open] .b3d-parts__count { display: none; }
.b3d-parts ul { list-style: none; margin: 0; padding: 0; }
.b3d-parts li { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 14px; }
.b3d-parts__name { flex: 1; min-width: 0; }
.b3d-parts__g { font-size: 12px; color: var(--b3d-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.b3d-parts li b { min-width: 1.6em; text-align: right; font-variant-numeric: tabular-nums; color: var(--b3d-brand); }
.b3d-parts__weight { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--b3d-line); font-size: 14px; font-weight: 700; }
.b3d-parts__weight small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; line-height: 1.35; color: var(--b3d-ink-soft); }
.b3d-parts li small { font-size: 12px; color: var(--b3d-ink-soft); font-weight: 400; }
.b3d-parts__warn {
	margin: 8px 0 0; padding: 6px 8px; max-width: 240px; font-size: 13px; font-weight: 700; line-height: 1.3;
	color: var(--b3d-danger); background: #fdecea; border-radius: 8px;
}

/* ---- Menu w scenie (przy dziurce / łączniku / kole) ---- */

.b3d-menu {
	top: 0;
	left: 0;
	padding: 10px;
	width: 248px;
	z-index: 5;
	will-change: transform;
}
.b3d-menu__title { font-size: 12px; font-weight: 700; color: var(--b3d-ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 2px 8px; }
.b3d-menu__status { margin: -2px 2px 8px; font-size: 13px; color: var(--b3d-ink); }
.b3d-menu__parts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.b3d-part {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; color: var(--b3d-ink);
	background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 10px;
	padding: 6px 4px 8px; cursor: pointer;
}
.b3d-part:hover { background: #eaf3d2; border-color: var(--b3d-lime); }
.b3d-part img { width: 56px; height: 56px; }
.b3d-menu__reason { margin: 6px 2px 2px; font-size: 14px; }
.b3d-menu__lens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b3d-menu__lens .b3d-act { margin: 0; text-align: center; min-height: 40px; }
.b3d-menu__acts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.b3d-act { width: 100%; text-align: left; font-size: 13px; min-height: 36px; }
.b3d-act:hover:not(:disabled) { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-act.is-danger { color: var(--b3d-danger); }
.b3d-act--thumb { display: flex; align-items: center; gap: 8px; padding-top: 2px; padding-bottom: 2px; }
.b3d-act--thumb img { width: 34px; height: 34px; }
.b3d-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.b3d-toggle::after {
	content: ''; flex: none; width: 30px; height: 18px; border-radius: 999px;
	background: #d5d9e6 radial-gradient(circle at 9px 50%, #fff 6px, transparent 6.5px);
	transition: background 0.12s;
}
.b3d-toggle[aria-pressed="true"]::after { background: var(--b3d-lime) radial-gradient(circle at 21px 50%, #fff 6px, transparent 6.5px); }

/* ---- Strzałki kierunku płytki (wokół dziurki) ---- */

.b3d-dirs { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.b3d-dirs[hidden] { display: none; }
.b3d-dir {
	position: absolute; top: 0; left: 0; width: 40px; height: 40px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	font: inherit; font-size: 20px; line-height: 1; color: #fff;
	background: var(--b3d-brand); border: 2px solid #fff; border-radius: 50%;
	box-shadow: 0 4px 14px rgba(16, 22, 60, 0.3);
	cursor: pointer; pointer-events: auto; will-change: transform;
}
.b3d-dir span { display: block; }
.b3d-dir:hover:not(:disabled) { background: var(--b3d-brand-dark); }
.b3d-dir:disabled { background: #b9bfd0; color: #eef0f6; cursor: not-allowed; box-shadow: none; }
/* v3.4: kierunek, w którym płytka przykręci się do kostki obok (spinka) */
.b3d-dir.is-brace { background: var(--b3d-lime); color: var(--b3d-brand-dark); }
.b3d-dir.is-brace:hover:not(:disabled) { background: #8fae2c; }

/* ---- Pasek akcji przy obiekcie (stawianie, kulkowe, obrót) ---- */

.b3d-float {
	top: 0; left: 0; z-index: 4; padding: 6px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100% - 16px);
	will-change: transform;
}
.b3d-float[hidden] { display: none; }
.b3d-float button { min-height: 36px; }
.b3d-float button:hover:not(:disabled) { background: #f1f3fb; }
.b3d-float button:disabled { opacity: 0.45; cursor: default; }
.b3d-float .b3d-float__main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-float .b3d-float__main:hover:not(:disabled) { background: var(--b3d-brand-dark); }
.b3d-float__angle { min-width: 56px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--b3d-brand); }
.b3d-float__info { padding: 0 6px; font-size: 13px; font-weight: 700; }

/* ---- Panel z linkiem (gdy schowek niedostępny; tworzy go share.js) ---- */

.b3d-share-panel {
	position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
	display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
	width: min(460px, calc(100vw - 32px)); padding: 8px;
	background: #fff; color: var(--b3d-ink);
	border: 1px solid var(--b3d-line); border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 22, 60, 0.18);
}
/* Duży projekt: powód braku fizyki zostaje pod paskiem, także na ekranie dotykowym. */
.b3d-project-limit { position: static; order: 100; flex: 1 0 100%; min-width: 0; box-sizing: border-box; margin: 0; padding: 6px 8px; font-size: 13px; line-height: 1.35; border: 0; box-shadow: none; }
.b3d-toolbar:has(.b3d-project-limit:not([hidden])) { flex-wrap: wrap; }
.b3d-project-limit[hidden] { display: none; }
@media (max-width: 720px) { .b3d-project-limit { left: 8px; right: 8px; padding: 5px 8px; font-size: 12px; } }
.b3d-share-panel--file { position: fixed; top: 80px; left: 16px; z-index: 1000; }
.b3d-share-panel--file > span { flex-basis: 100%; }
.b3d-share-panel__input {
	flex: 1 1 200px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px;
	border: 1px solid var(--b3d-line); border-radius: 8px; color: var(--b3d-ink); background: #f5f7fd;
}
.b3d-share-panel__copy { color: #fff !important; background: var(--b3d-brand) !important; border-color: var(--b3d-brand) !important; }

/* ---- Pusta scena i podpowiedź ---- */

.b3d-empty { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; pointer-events: none; }
/* Pusta scena: druga, cichsza droga — gotowy przykład (library.js). */
.b3d-first-ex {
	pointer-events: auto; min-height: 40px; padding: 8px 16px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
	color: var(--b3d-brand); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 15, 153, 0.25);
}
.b3d-first-ex:hover { background: #fff; border-color: var(--b3d-brand); }
@media (pointer: coarse) { .b3d-first-ex { min-height: 44px; } }
.b3d-empty[hidden] { display: none; }
.b3d-first {
	pointer-events: auto; font-size: 17px; padding: 14px 24px; border-radius: 12px;
	color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand);
	box-shadow: 0 10px 30px rgba(0, 15, 153, 0.3);
}
.b3d-first:hover { background: var(--b3d-brand-dark); }

.b3d-hint {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	/* width: max-content — bez tego przy left: 50% przeglądarka łamie tekst na połowie szerokości ekranu
	   (na telefonie 3–4 wąskie linie, które wchodziły na pasek części; przegląd UX 2026-10-21b). */
	width: max-content;
	max-width: min(680px, calc(100% - 28px));
	margin: 0;
	padding: 9px 16px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background: rgba(29, 23, 75, 0.88);
	border-radius: 999px;
	pointer-events: none;
}
.b3d-hint:empty { display: none; }
.b3d-hint.is-flash { animation: b3d-flash 0.45s; }
@keyframes b3d-flash {
	0%, 100% { transform: translateX(-50%); }
	25% { transform: translateX(calc(-50% - 6px)); }
	75% { transform: translateX(calc(-50% + 6px)); }
}
@media (prefers-reduced-motion: reduce) { .b3d-hint.is-flash { animation: none; } }

/* ---- Wąski ekran ---- */

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
	/* Pierwszy rząd: marka, ikony Cofnij / Ponów, Fizyka, „Menu” — zawsze widoczne. Dodatkowe
	   przyciski („Przywróć poprzedni”, „Zatrzymaj” / „Od nowa” w trakcie fizyki) schodzą do
	   drugiego rzędu (pasek się zawija), zamiast wypychać „Menu” poza ekran. Grupy końca paska
	   i fizyki są tu przezroczyste dla układu (display: contents), żeby każdy przycisk miał
	   własne miejsce w kolejności. */
	.b3d-toolbar { left: 8px; right: 8px; top: 8px; max-width: none; gap: 6px; padding: 6px 8px; flex-wrap: wrap; row-gap: 6px; }
	.b3d-brand { order: 0; font-size: 16px; }
	.b3d-tools button { padding: 5px 8px; font-size: 13px; }
	.b3d-ibtn span { display: none; }
	.b3d-ibtn { padding-left: 7px; padding-right: 7px; }
	.b3d-tools--history { order: 1; flex-wrap: nowrap; }
	.b3d-tools--end,
	.b3d-tools--end:not(:has(> :not([hidden]))),
	.b3d-tools--end > .b3d-phys { display: contents; }
	.b3d-phys__toggle { order: 2; margin-left: auto; }
	.b3d-menubar { order: 3; }
	.b3d-tools--end [data-act="restore"] { order: 4; }
	.b3d-phys [data-phys="pause"] { order: 5; margin-left: auto; }
	.b3d-phys [data-phys="restart"] { order: 6; }
	.b3d-menubar.is-narrow > summary {
		display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; user-select: none;
		font-size: 13px; font-weight: 700; color: var(--b3d-brand-dark);
		background: #fff; border: 1px solid var(--b3d-line); border-radius: 9px; padding: 5px 9px;
	}
	.b3d-menubar.is-narrow > summary::-webkit-details-marker { display: none; }
	.b3d-menubar.is-narrow[open] > summary { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
	.b3d-menubar.is-narrow > summary:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
	.b3d-menubar.is-narrow > .b3d-menubar__items {
		position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
		width: min(300px, calc(100vw - 24px)); max-height: calc(100vh - 80px); overflow: auto;
		flex-direction: column; align-items: stretch; gap: 4px; padding: 6px;
		background: #fff; border: 1px solid var(--b3d-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 22, 60, 0.18);
	}
	.b3d-menubar.is-narrow .b3d-drop > summary,
	.b3d-menubar.is-narrow .b3d-tools__plain { display: block; width: 100%; text-align: left; font-size: 14px; padding: 8px 10px; }
	.b3d-menubar.is-narrow .b3d-drop__menu {
		position: static; min-width: 0; margin: 2px 0 4px 10px; padding: 2px 0 2px 8px;
		border: 0; border-left: 2px solid var(--b3d-line); border-radius: 0; box-shadow: none;
	}
	.b3d-parts { top: auto; right: 8px; bottom: 96px; min-width: 0; max-width: calc(100% - 16px); max-height: 38vh; overflow: auto; padding: 8px 10px; }
	.b3d-parts li { font-size: 13px; }
	.b3d-parts__weight small { display: none; }
	.b3d-hint { bottom: 10px; max-width: calc(100% - 16px); padding: 7px 12px; border-radius: 14px; font-size: 13px; line-height: 1.3; }
}

/* Bardzo wąski telefon (≤ 380 px): „Menu” samą ikoną (napis zostaje dla czytników ekranu), żeby
   pierwszy rząd (marka, Cofnij, Ponów, Fizyka, Menu) zmieścił się bez zawijania. */
@media (max-width: 380px) {
	.b3d-menubar__txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
	.b3d-menubar.is-narrow > summary { min-width: 44px; justify-content: center; }
	.b3d-toolbar { gap: 5px; }
}

/* ---- Tylko dla czytników ekranu ---- */

.b3d-sr {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---- Dotyk: cele co najmniej 44 px ---- */

@media (pointer: coarse) {
	.b3d-dir { width: 44px; height: 44px; font-size: 22px; }
	/* Pasek narzędzi: Cofnij / Ponów, nagłówki menu, „Menu”, Fizyka — cele co najmniej 44 px. */
	.b3d-tools button,
	.b3d-drop > summary,
	.b3d-menubar.is-narrow > summary { min-height: 44px; }
	.b3d-ibtn { min-width: 44px; justify-content: center; }
	.b3d-drop > summary,
	.b3d-menubar.is-narrow > summary { display: inline-flex; align-items: center; }
	.b3d-menubar.is-narrow .b3d-drop > summary { display: flex; }
	.b3d-float button,
	.b3d-act,
	.b3d-share-panel button { min-height: 44px; }
	.b3d-float button { min-width: 44px; }
	.b3d-parts summary { min-height: 32px; align-items: center; }
}
.b3d-float button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.b3d-float .b3d-float__main[aria-disabled="true"]:hover { background: var(--b3d-brand); }

/* === 6a === Pasek (grupy Plik / Dla nauczyciela / W SCUBE), okna, przykłady, lista części,
   zapis w SCUBE, Moje projekty, link + QR, pasek błędu zapisu, instrukcja, wydruk. */

/* ---- Rozwijane grupy paska (Plik, Dla nauczyciela, W SCUBE) ---- */

.b3d-drop { position: relative; }
/* Pasek ma własny kontekst warstw (backdrop-filter) — z otwartą grupą musi być nad paletą i menu w scenie. */
.b3d-toolbar:has(.b3d-drop[open]),
.b3d-toolbar:has(.b3d-menubar.is-narrow[open]) { z-index: 25; }
.b3d-drop[hidden] { display: none; }
.b3d-drop > summary {
	list-style: none; cursor: pointer; user-select: none;
	font-size: 14px; font-weight: 600; color: var(--b3d-brand-dark);
	background: #fff; border: 1px solid var(--b3d-line); border-radius: 9px; padding: 6px 11px;
}
.b3d-drop > summary::-webkit-details-marker { display: none; }
.b3d-drop > summary::after { content: ' ▾'; font-size: 11px; color: var(--b3d-ink-soft); }
.b3d-drop > summary:hover,
.b3d-drop[open] > summary { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-drop > summary:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-drop__menu {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 220px;
	display: flex; flex-direction: column; gap: 4px; padding: 6px;
	background: #fff; border: 1px solid var(--b3d-line); border-radius: 12px;
	box-shadow: 0 10px 30px rgba(16, 22, 60, 0.18);
}
.b3d-tools .b3d-drop__menu button,
.b3d-drop__link {
	width: 100%; text-align: left; border-color: transparent; font: inherit; font-size: 14px; font-weight: 600;
	color: var(--b3d-brand-dark); padding: 8px 10px; border-radius: 8px; text-decoration: none; display: block;
}
.b3d-drop__link:hover { background: #f1f3fb; }
.b3d-drop__link:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
/* Grupy w menu „Projekt” (W SCUBE, Plik, link + wyczyść) — kreska między nimi, małe podpisy. */
.b3d-drop__group { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; border-top: 1px solid var(--b3d-line); }
.b3d-drop__group[hidden] { display: none; }
.b3d-drop__label {
	margin: 2px 10px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--b3d-ink-soft);
}
/* Przełączniki w menu (Pokaż wnętrze, Lżejszy widok, Dźwięki): suwak zamiast wypełnienia. */
.b3d-tools .b3d-drop__menu .b3d-toggle,
.b3d-tools .b3d-drop__menu .b3d-toggle[aria-pressed="true"] { display: flex; color: var(--b3d-brand-dark); background: #fff; border-color: transparent; }
.b3d-tools .b3d-drop__menu .b3d-toggle:hover:not(:disabled) { background: #f1f3fb; }
.b3d-drop__menu kbd {
	margin-left: auto; margin-right: 6px; padding: 0 5px; font: inherit; font-size: 11px; font-weight: 700;
	color: var(--b3d-ink-soft); border: 1px solid var(--b3d-line); border-radius: 5px;
}
.b3d-drop > summary.is-suggested { border-color: var(--b3d-lime); box-shadow: 0 0 0 3px rgba(164, 198, 58, 0.45); }

/* ---- Okna (dialog): wprowadzenie, przykłady, lista części, projekty w SCUBE ---- */

.b3d-dialog {
	width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); padding: 0;
	color: var(--b3d-ink); background: #fff; border: 0; border-radius: 16px;
	box-shadow: 0 24px 60px rgba(16, 22, 60, 0.3); overflow: auto; overscroll-behavior: contain;
}
/* v5 F0 (plan §8.4 B–C): okno modalne otwarte → panele pod nim bez backdrop-filter (pod przyciemnieniem rozmycia nie widać,
   a warstwy z rozmyciem nad żywym płótnem WebGL migotały przy przewijaniu okna). `is-modal` ustawia panels.js (watchModal) —
   zapas dla przeglądarek bez :has(). Wysokość okna w dvh (100vh na telefonie to wysokość BEZ paska adresu). */
.b3d.is-modal .b3d-panel,
.b3d:has(dialog[open]) .b3d-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* W trakcie przewijania okna (panels.js makeDialog) przyciski pod nieruchomym kursorem nie dostają :hover (mrugały). */
.b3d-dialog.is-scrolling .b3d-dialog__body { pointer-events: none; }
.b3d-dialog--wide { width: min(820px, calc(100vw - 24px)); }
.b3d-dialog::backdrop { background: rgba(29, 23, 75, 0.45); }
.b3d-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; }
.b3d-dialog__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--b3d-brand); }
.b3d-dialog__x {
	flex: none; width: 36px; height: 36px; padding: 0; font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
	color: var(--b3d-ink-soft); background: transparent; border: 0; border-radius: 9px;
}
.b3d-dialog__x:hover { background: #f1f3fb; color: var(--b3d-ink); }
.b3d-dialog__body { padding: 10px 18px 4px; }
.b3d-dialog__lead { margin: 0 0 12px; font-size: 15px; line-height: 1.45; }
.b3d-dialog__error { margin: 8px 0; padding: 8px 10px; font-size: 14px; font-weight: 700; color: var(--b3d-danger); background: #fdecea; border-radius: 8px; }
.b3d-dialog__error[hidden] { display: none; }
.b3d-dialog__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px 18px; }
.b3d-dialog__acts:empty { display: none; }
.b3d-dialog__link { margin-right: auto; font-weight: 700; color: var(--b3d-brand); }
.b3d-dialog button,
.b3d-banner button,
.b3d-steps button {
	font: inherit; font-size: 14px; font-weight: 700; color: var(--b3d-brand-dark);
	background: #fff; border: 1px solid var(--b3d-line); border-radius: 9px; padding: 8px 14px; min-height: 38px; cursor: pointer;
}
.b3d-dialog .b3d-dialog__x { border: 0; min-height: 0; padding: 0; }
.b3d-dialog button:hover:not(:disabled),
.b3d-steps button:hover:not(:disabled) { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-dialog button:disabled,
.b3d-steps button:disabled { opacity: 0.45; cursor: default; }
.b3d-dialog button.is-main,
.b3d-steps button.is-main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-dialog button.is-main:hover:not(:disabled),
.b3d-steps button.is-main:hover:not(:disabled) { background: var(--b3d-brand-dark); }
.b3d-dialog button.is-danger { color: var(--b3d-danger); }
.b3d-dialog button:focus-visible,
.b3d-dialog input:focus-visible,
.b3d-dialog a:focus-visible,
.b3d-banner button:focus-visible,
.b3d-steps button:focus-visible,
.b3d-steps input:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }

/* Wprowadzenie / Pomoc (#b3d-intro, editor/intro.js, Ruling 297): widok „start” (krótki) i „help” (karty kroków niżej) */
.b3d-intro { position: relative; width: min(920px, calc(100vw - 24px)); padding: 22px 22px 0; }
.b3d-intro .b3d-dialog__title { font-size: 22px; }
.b3d-intro__cards { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 0; padding: 0; }
.b3d-intro__card { padding: 14px; background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 14px; }
.b3d-intro__card svg { display: block; width: 56px; height: 56px; margin-bottom: 8px; }
.b3d-intro__card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--b3d-brand-dark); }
.b3d-intro__card h3 .b3d-intro__n {
	flex: none;
	display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
	font-size: 13px; color: var(--b3d-brand-dark); background: var(--b3d-lime);
}
.b3d-intro__card p { margin: 0; font-size: 14px; line-height: 1.45; }
.b3d-intro .b3d-dialog__acts { padding: 18px 0 22px; }
/* Skróty klawiszowe w Pomocy (przegląd UX 2026-10-21b) — tylko z myszą; na dotyku bez klawiatury nic nie dają. */
.b3d-keys { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--b3d-line); border-radius: 14px; }
.b3d-keys__title { margin: 0 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b3d-ink-soft); }
.b3d-keys__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; margin: 0; }
.b3d-keys__list > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.b3d-keys__list dt { flex: none; min-width: 92px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.b3d-keys__list dd { margin: 0; font-size: 13px; line-height: 1.35; }
.b3d-keys kbd {
	display: inline-block; min-width: 20px; padding: 1px 5px; font: inherit; font-size: 12px; font-weight: 800; text-align: center;
	color: var(--b3d-brand-dark); background: #f5f7fd; border: 1px solid var(--b3d-line); border-bottom-width: 2px; border-radius: 5px;
}
@media (hover: none) and (pointer: coarse) { .b3d-keys { display: none; } }

/* ---- Wprowadzenie: widok „start” (Ruling 297) — jeden krótki ekran, duże obrazki, bez przewijania ---- */
.b3d-intro__view[hidden], .b3d-intro__panel[hidden] { display: none; }
.b3d-intro[data-view="start"] { width: min(760px, calc(100vw - 24px)); padding: 28px 28px 0; }
.b3d-dialog .b3d-intro__x {
	position: absolute; top: 10px; right: 10px; z-index: 2; width: 44px; height: 44px; min-height: 44px;
	font-size: 28px; line-height: 1; border-radius: 12px; color: var(--b3d-ink-soft);
}
.b3d-intro__start .b3d-dialog__title { padding-right: 40px; font-size: 30px; line-height: 1.15; }
.b3d-intro__lead { margin: 8px 0 0; font-size: 18px; line-height: 1.4; color: var(--b3d-ink); }
.b3d-intro__steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; }
.b3d-intro__step {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; text-align: center;
	background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 16px;
}
.b3d-intro__step:last-child { background: #f4f9e6; border-color: rgba(164, 198, 58, 0.55); }
.b3d-intro__step svg { display: block; width: 72px; height: 72px; margin-bottom: 4px; }
.b3d-intro__step b { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--b3d-brand-dark); text-wrap: balance; }
/* Numer kroku w rogu karty — tytuł zostaje wyśrodkowany pod obrazkiem. */
.b3d-intro__step .b3d-intro__n { position: absolute; top: 10px; left: 10px; }
.b3d-intro__step small { font-size: 14px; line-height: 1.3; color: var(--b3d-ink-soft); }
.b3d-intro__n {
	flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
	font-size: 13px; font-weight: 800; color: var(--b3d-brand-dark); background: var(--b3d-lime);
}
.b3d-intro__more-row { margin: 14px 0 0; text-align: center; }
.b3d-dialog .b3d-intro__more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; font-size: 15px; color: var(--b3d-brand); background: #eef1fb; border-color: transparent; border-radius: 999px; }
.b3d-dialog .b3d-intro__more:hover:not(:disabled) { background: #e3e8f7; border-color: rgba(0, 15, 153, 0.25); }
.b3d-intro__start .b3d-screen { margin-top: 14px; }
.b3d-intro__start .b3d-screen__lead { text-align: center; }
.b3d-intro__start .b3d-screen { padding: 8px 14px; }
.b3d-dialog .b3d-intro__start .b3d-screen__more { min-height: 36px; padding: 4px 6px; font-size: 14px; color: var(--b3d-brand); background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; }
.b3d-dialog .b3d-intro__start .b3d-screen__more:hover { background: rgba(251, 140, 0, 0.12); border: 0; }
.b3d-intro[data-view="start"] .b3d-dialog__acts { padding: 18px 0 24px; }
.b3d-intro[data-view="start"] .b3d-dialog__acts button { min-height: 48px; padding: 10px 20px; font-size: 16px; }
.b3d-intro .b3d-dialog__acts button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.b3d-intro .b3d-dialog__acts button .b3d-ico { color: var(--b3d-brand); }
/* ---- Wprowadzenie: widok „help” — nagłówek z „Wróć”, zakładki Kroki / Gumka i sznurek / Skróty ---- */
.b3d-intro__help-head { display: flex; align-items: center; gap: 12px; padding-right: 44px; }
.b3d-dialog .b3d-intro__back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 12px 6px 8px; }
.b3d-intro__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.b3d-dialog .b3d-intro__tabs [role="tab"] { min-height: 44px; padding: 8px 16px; font-size: 15px; background: #f5f7fd; border-radius: 999px; }
.b3d-dialog .b3d-intro__tabs [role="tab"]:hover { background: #e6eaf8; border-color: rgba(0, 15, 153, 0.2); }
.b3d-dialog .b3d-intro__tabs [role="tab"][aria-selected="true"] { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-intro__panel { padding-top: 2px; }
.b3d-intro__panel .b3d-intro__cards { margin-top: 12px; }
.b3d-intro__panel .b3d-rope-help, .b3d-intro__panel .b3d-keys { margin: 12px 0 0; }
.b3d-intro__panel .b3d-rope-help p, .b3d-intro__panel .b3d-rope-help ul { font-size: 15px; line-height: 1.5; }
.b3d-intro__panel .b3d-rope-help li + li { margin-top: 6px; }
@media (hover: none) and (pointer: coarse) { .b3d-intro__tab-keys { display: none; } }
@media (prefers-reduced-motion: no-preference) {
	.b3d-intro__view:not([hidden]), .b3d-intro__panel:not([hidden]) { animation: b3d-pop 0.16s ease-out; }
}
@media (max-width: 720px) {
	.b3d-intro[data-view="start"] { padding: 18px 16px 0; }
	.b3d-intro__start .b3d-dialog__title { font-size: 25px; }
	.b3d-intro__lead { font-size: 16px; }
	.b3d-intro__steps { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
	.b3d-intro__step { padding: 12px 6px 12px; }
	.b3d-intro__step svg { width: 56px; height: 56px; }
	.b3d-intro__step b { font-size: 16px; }
	.b3d-intro__step small { font-size: 13px; }
	/* „Szkicownik” na telefonie: zdanie w jednej linii, link pod nim — bez poszarpanego zawijania. */
	.b3d-intro__start .b3d-screen__lead { font-size: 14px; line-height: 1.35; text-wrap: balance; }
	.b3d-dialog .b3d-intro__start .b3d-screen__more { display: block; margin: 2px auto 0; min-height: 32px; }
	/* Telefon: trzy przyciski w jednym rzędzie, przyklejone do dołu (obie strony okna). */
	.b3d-intro[data-view] .b3d-dialog__acts { flex-wrap: nowrap; gap: 6px; padding: 12px 0 14px; }
	.b3d-intro[data-view] .b3d-dialog__acts button { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 10px 6px; font-size: 15px; }
	.b3d-intro[data-view] .b3d-dialog__acts button .b3d-ico { display: none; }
	.b3d-intro__help-head .b3d-dialog__title { font-size: 20px; }
}

/* ---- v5 F5 Katalog: okno „Przykłady i lekcje” (.b3d-lib, editor/library.js) ----
   Stała wysokość okna i NIERUCHOMY nagłówek (tytuł, zakładki, szukajka, poziom, pojęcia) — przewija się tylko lista
   (.b3d-dialog__body). Miniatury mają width/height w HTML i aspect-ratio tutaj: nic nie skacze przy przewijaniu.
   Bez content-visibility (szacowane wysokości dawały przesunięcia układu przy przewijaniu) i bez WebGL w oknie. */
.b3d-dialog.b3d-lib {
	width: min(1040px, calc(100vw - 24px));
	height: min(860px, calc(100vh - 32px)); height: min(860px, calc(100dvh - 32px));
	overflow: hidden;
}
.b3d-lib[open] { display: flex; flex-direction: column; }
.b3d-lib .b3d-dialog__head { flex: none; }
/* Tu przewija się sama treść: pointer-events: none na niej odebrałoby jej kółko myszy (zdarzenie trafiłoby w okno, które się
   nie przewija). W trakcie przewijania wskaźnika nie łapią więc tylko DZIECI treści (karty, przyciski — bez mrugania :hover). */
.b3d-dialog.b3d-lib.is-scrolling .b3d-dialog__body { pointer-events: auto; }
.b3d-dialog.b3d-lib.is-scrolling .b3d-dialog__body > * { pointer-events: none; }
.b3d-lib .b3d-dialog__body {
	flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
	padding: 14px 18px 10px;
}
.b3d-lib__bar { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 12px; border-bottom: 1px solid var(--b3d-line); }
.b3d-lib__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.b3d-lib__tabs [role="tab"], .b3d-lib__chip, .b3d-lib .b3d-example button { -webkit-tap-highlight-color: transparent; }
.b3d-dialog.b3d-lib .b3d-lib__tabs [role="tab"] {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; min-height: 40px;
	font-size: 15px; font-weight: 800; color: var(--b3d-brand-dark); background: #f1f3fb; border: 1px solid transparent; border-radius: 999px;
}
.b3d-dialog.b3d-lib .b3d-lib__tabs [role="tab"]:hover { background: #e6eaf8; border-color: rgba(0, 15, 153, 0.2); }
.b3d-dialog.b3d-lib .b3d-lib__tabs [role="tab"][aria-selected="true"] { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-lib__n { min-width: 22px; padding: 1px 7px; font-size: 12px; font-weight: 800; text-align: center; border-radius: 999px; background: rgba(0, 15, 153, 0.09); }
.b3d-lib__n.is-soon { font-weight: 700; }
[aria-selected="true"] > .b3d-lib__n { background: rgba(255, 255, 255, 0.22); }
.b3d-lib__row { display: flex; gap: 8px; }
.b3d-lib__search { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.b3d-lib__search svg { position: absolute; left: 11px; color: var(--b3d-ink-soft); pointer-events: none; }
.b3d-lib__search input,
.b3d-lib__level select {
	width: 100%; min-height: 40px; padding: 8px 12px; font: inherit; font-size: 15px; color: var(--b3d-ink);
	background: #fff; border: 1px solid rgba(31, 35, 51, 0.22); border-radius: 10px;
}
.b3d-lib__search input { padding-left: 36px; }
.b3d-lib__level { flex: none; }
.b3d-lib__level select { width: auto; padding-right: 8px; font-weight: 700; color: var(--b3d-brand-dark); cursor: pointer; }
.b3d-lib__search input:focus-visible,
.b3d-lib__level select:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 1px; }
.b3d-lib__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.b3d-lib__chips[hidden] { display: none; }
.b3d-dialog.b3d-lib .b3d-lib__chip {
	min-height: 32px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--b3d-brand-dark);
	background: #fff; border: 1px solid rgba(31, 35, 51, 0.18); border-radius: 999px;
}
.b3d-dialog.b3d-lib .b3d-lib__chip:hover { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.35); }
.b3d-dialog.b3d-lib .b3d-lib__chip[aria-pressed="true"] { color: #233006; background: var(--b3d-lime); border-color: var(--b3d-lime); }

.b3d-lib__status { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--b3d-ink-soft); }
.b3d-lib__status[hidden] { display: none; }
.b3d-dialog.b3d-lib .b3d-lib__clear,
.b3d-dialog.b3d-lib .b3d-lib__reset {
	min-height: 0; padding: 2px 4px; font-size: 13px; color: var(--b3d-brand); background: transparent; border: 0; text-decoration: underline;
}
.b3d-lib__empty,
.b3d-lib__soon { max-width: 560px; margin: 24px auto; padding: 18px 20px; text-align: center; background: #f5f7fd; border-radius: 14px; }
.b3d-lib__empty[hidden], .b3d-lib__soon[hidden] { display: none; }
.b3d-lib__empty p, .b3d-lib__soon p { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.b3d-lib__empty button { margin: 4px; }
.b3d-lib__soon h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: var(--b3d-brand-dark); }
.b3d-lib__foot { margin: 14px 0 4px; font-size: 13px; line-height: 1.45; color: var(--b3d-ink-soft); }

/* Karty: 3 kolumny na komputerze, 2 przy węższym oknie, na telefonie wiersz z miniaturą 96×64 (niżej). */
.b3d-lib .b3d-examples { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0 0 6px; }
.b3d-lib .b3d-examples[hidden],
.b3d-lib .b3d-example[hidden] { display: none; }
.b3d-lib .b3d-example {
	position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden;
	background: #fff; border: 1px solid var(--b3d-line); border-radius: 14px;
}
.b3d-lib .b3d-example--task { background: #fbfdf5; border-color: rgba(164, 198, 58, 0.55); }
.b3d-lib .b3d-example--lesson { border-color: rgba(0, 15, 153, 0.25); }
.b3d-example__pic { position: relative; flex: none; aspect-ratio: 2 / 1; min-height: 0; overflow: hidden; background: #e8ecf6; }
/* Miniatura 3:2 w ramce 2:1 — `contain` i to samo tło co w obrazku (#e8ecf6): niższa karta, bez przycinania wieży. */
.b3d-example__pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.b3d-example__swatch { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; }
.b3d-example__swatch i { width: 22px; height: 22px; border-radius: 6px; background: var(--c); border: 1px solid rgba(0, 0, 0, 0.15); }
.b3d-lib .b3d-example.is-done .b3d-example__pic::after {
	content: '✓'; position: absolute; top: 8px; right: 8px; display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; font-size: 16px; font-weight: 900; color: #233006; background: var(--b3d-lime); border-radius: 50%;
	box-shadow: 0 2px 6px rgba(16, 22, 60, 0.2);
}
.b3d-example__main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; min-width: 0; }
.b3d-lib .b3d-example h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--b3d-brand-dark); }
.b3d-lib .b3d-example p { margin: 0; font-size: 14px; line-height: 1.4; }
.b3d-lib .b3d-example__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px !important; }
.b3d-example__concept { padding: 1px 8px; font-weight: 700; color: var(--b3d-brand-dark); background: #eef1fb; border-radius: 999px; }
.b3d-example__level, .b3d-example__meta { color: var(--b3d-ink-soft); font-weight: 700; }
.b3d-example__tag {
	padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
	color: #3d5a0a; background: #fff; border: 1px solid var(--b3d-lime);
}
.b3d-example__done { margin-left: auto; font-weight: 800; color: #3d5a0a; }
.b3d-example__done[hidden] { display: none; }
.b3d-example__acts { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.b3d-dialog.b3d-lib .b3d-example__more-btn { padding: 8px 6px; color: var(--b3d-brand); background: transparent; border-color: transparent; }
.b3d-dialog.b3d-lib .b3d-example__more-btn:hover { background: #f1f3fb; }
.b3d-example__more { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed var(--b3d-line); }
.b3d-example__more[hidden] { display: none; }
.b3d-lib .b3d-example__more p { font-size: 13.5px; }
.b3d-lib .b3d-example__task { font-weight: 700; color: var(--b3d-brand-dark); }
.b3d-dialog.b3d-lib .b3d-example__mark { align-self: flex-start; min-height: 32px; padding: 4px 10px; font-size: 13px; }

@media (max-width: 1000px) {
	.b3d-lib .b3d-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Telefon: okno prawie na cały ekran, zakładki na całą szerokość, pojęcia w jednym przewijanym rzędzie, karty w 2 kolumnach:
   miniatura, tytuł, poziom i przyciski (krótki opis — pod „Więcej”). 23 przykłady ≈ 4 ekrany zamiast dawnych 10. */
@media (max-width: 640px) {
	.b3d-dialog.b3d-lib { width: calc(100vw - 16px); height: calc(100vh - 16px); height: calc(100dvh - 16px); border-radius: 14px; }
	.b3d-lib .b3d-dialog__head { padding: 12px 12px 0 14px; }
	.b3d-lib .b3d-dialog__title { font-size: 18px; }
	.b3d-lib__bar { gap: 8px; padding: 8px 12px 10px; }
	.b3d-lib__tabs { flex-wrap: nowrap; gap: 4px; }
	.b3d-dialog.b3d-lib .b3d-lib__tabs [role="tab"] { flex: 1 1 0; justify-content: center; gap: 5px; min-width: 0; padding: 6px 6px; font-size: 14px; }
	.b3d-lib__n { min-width: 0; padding: 1px 5px; font-size: 11px; }
	.b3d-lib__search input, .b3d-lib__level select { font-size: 16px; } /* < 16 px — iOS powiększa stronę przy fokusie */
	.b3d-lib__chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
	.b3d-lib__chips::-webkit-scrollbar { display: none; }
	.b3d-dialog.b3d-lib .b3d-lib__chip { flex: none; }
	.b3d-lib .b3d-dialog__body { padding: 10px 10px 8px; }
	.b3d-lib .b3d-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.b3d-lib .b3d-example { border-radius: 12px; }
	.b3d-example__swatch i { width: 14px; height: 14px; border-radius: 4px; }
	.b3d-lib .b3d-example.is-done .b3d-example__pic::after { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 13px; }
	.b3d-example__main { gap: 4px; padding: 8px 8px 8px; }
	.b3d-lib .b3d-example h3 { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.b3d-lib .b3d-example__concept,
	.b3d-lib .b3d-example__meta { display: none; }
	.b3d-lib .b3d-example__tags { font-size: 11px !important; }
	.b3d-example__acts { gap: 2px; padding-top: 2px; }
	.b3d-dialog.b3d-lib .b3d-example__acts .is-main { flex: 1 1 auto; padding: 6px 8px; }
	.b3d-dialog.b3d-lib .b3d-example__more-btn { flex: none; padding: 6px 4px; font-size: 13px; }
}

/* Lista części (okno i wydruk) */
.b3d-bom { width: 100%; border-collapse: collapse; font-size: 14px; }
.b3d-bom th, .b3d-bom td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--b3d-line); }
.b3d-bom thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b3d-ink-soft); }
.b3d-bom tfoot th, .b3d-bom tfoot td { font-weight: 800; border-bottom: 0; }
.b3d-bom .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.b3d-bom__note { margin: 6px 0 0; font-size: 12px; color: var(--b3d-ink-soft); }

/* Formularz zapisu */
.b3d-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 700; }
.b3d-field input {
	font: inherit; font-size: 16px; font-weight: 400; padding: 9px 11px; color: var(--b3d-ink);
	border: 1px solid rgba(31, 35, 51, 0.25); border-radius: 9px;
}
.b3d-field__hint { margin: 6px 0 10px; padding: 7px 10px; font-size: 13px; font-weight: 700; color: #7a4b00; background: #fff4d6; border-radius: 8px; }
.b3d-field__note { margin: 8px 0 0; font-size: 13px; color: var(--b3d-ink-soft); line-height: 1.4; }
.b3d-field__note--warn { padding: 7px 10px; font-weight: 700; color: #7a4b00; background: #fff4d6; border-radius: 8px; }
.b3d-field__note[hidden] { display: none; }
.b3d-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0; font-size: 14px; }
.b3d-check input { margin-top: 3px; }
.b3d-status { display: inline-block; margin: 0; padding: 2px 9px; font-size: 12px; font-weight: 700; border-radius: 999px; background: #eef0f6; color: var(--b3d-ink); }
.b3d-status[data-status="pending"] { background: #fff4d6; color: #7a4b00; }
.b3d-status[data-status="published"] { background: #eaf3d2; color: #3c5a00; }
.b3d-status[data-status="hidden"] { background: #fdecea; color: var(--b3d-danger); }

/* Moje projekty */
.b3d-mine { list-style: none; margin: 0; padding: 0; }
.b3d-mine__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--b3d-line); }
.b3d-mine__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.b3d-mine__info b { font-size: 15px; overflow-wrap: anywhere; }
.b3d-mine__info > span:not(.b3d-status) { font-size: 13px; color: var(--b3d-ink-soft); }
.b3d-mine__info .b3d-status { align-self: flex-start; }
.b3d-mine__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.b3d-mine__acts button { padding: 6px 10px; min-height: 34px; font-size: 13px; }
.b3d-mine__more { text-align: center; margin: 12px 0 4px; }

/* Krótki link + QR */
.b3d-link { display: flex; gap: 6px; }
.b3d-link__input {
	flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 700; padding: 8px 10px; color: var(--b3d-brand);
	background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 9px;
}
.b3d-qr { display: flex; justify-content: center; align-items: center; min-height: 120px; margin: 14px 0 4px; }
.b3d-qr canvas { width: 240px !important; height: 240px !important; border-radius: 8px; }
.b3d-qr__wait { color: var(--b3d-ink-soft); font-size: 14px; }

/* ---- Pasek „nie udało się zapisać” (zostaje, dopóki zapis nie wróci) ---- */

.b3d-banner {
	position: absolute; z-index: 15; left: 50%; bottom: 100px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(720px, calc(100% - 28px));
	padding: 10px 12px 10px 16px; font-size: 14px; font-weight: 700; line-height: 1.35;
	color: #fff; background: var(--b3d-danger); border-radius: 14px; box-shadow: 0 10px 30px rgba(198, 40, 40, 0.35);
}
.b3d-banner[hidden] { display: none; }
.b3d-banner button { flex: none; color: var(--b3d-danger); border-color: #fff; }
.b3d-banner button[hidden] { display: none; }

/* ---- Przejście publiczne (2026-10-21, editor/access.js + editor/feedback.js) ---- */

/* Gość: schowane pozycje menu (data-teacher / data-files / data-login) — [hidden] wygrywa z display: flex. */
.b3d-drop__link[hidden],
.b3d-tools .b3d-drop__menu button[hidden],
.b3d-menubar__items > [hidden] { display: none !important; }

/* Ikona „Uwagi” na pasku: tylko gość na szerokim ekranie (pasek zalogowanych na 1280 px jest pełny). */
.b3d-tools--aux .b3d-fb-ibtn { display: none; }
@media (min-width: 721px) {
	.b3d.is-guest .b3d-tools--aux .b3d-fb-ibtn { display: inline-flex; }
}

/* Przypomnienie „Niezapisane zmiany” — u góry pod paskiem: dół ekranu to podpowiedź, paleta i miejsce
   upuszczania części (pasek na dole zasłaniał cel przeciągania). */
.b3d-unsaved {
	position: absolute; z-index: 14; left: 50%; top: max(78px, calc(var(--b3d-toolbar-bottom, 0px) + 6px)); transform: translateX(-50%);
	display: flex; align-items: center; gap: 10px; width: max-content; max-width: min(680px, calc(100% - 28px));
	padding: 8px 8px 8px 16px; font-size: 14px; font-weight: 700; line-height: 1.35;
	color: #fff; background: var(--b3d-brand-dark); border-radius: 14px; box-shadow: 0 10px 30px rgba(16, 22, 60, 0.3);
}
.b3d-unsaved[hidden] { display: none; }
.b3d-unsaved button {
	flex: none; font: inherit; font-size: 14px; font-weight: 800; min-height: 38px; padding: 6px 14px; cursor: pointer;
	color: var(--b3d-brand-dark); background: var(--b3d-lime); border: 0; border-radius: 9px;
}
.b3d-unsaved .b3d-unsaved__x { padding: 6px 10px; color: #fff; background: transparent; font-size: 20px; line-height: 1; }
.b3d-unsaved button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }

/* Zaproszenie do uwag — mała karta w rogu, nie zasłania sceny i nie blokuje klików obok. */
.b3d-fbcard {
	z-index: 13; right: 14px; bottom: 100px; width: min(340px, calc(100% - 28px));
	padding: 12px 14px; font-size: 14px; line-height: 1.4;
}
.b3d-fbcard[hidden] { display: none; }
.b3d-fbcard__text { margin: 0 0 10px; font-weight: 700; color: var(--b3d-brand-dark); }
.b3d-fbcard__acts { display: flex; justify-content: flex-end; gap: 8px; }
.b3d-fbcard button {
	font: inherit; font-size: 14px; font-weight: 700; min-height: 38px; padding: 6px 14px; cursor: pointer;
	color: var(--b3d-brand-dark); background: #fff; border: 1px solid var(--b3d-line); border-radius: 9px;
}
.b3d-fbcard button.is-main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-fbcard button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }

/* Okno „Uwagi / zgłoś problem” */
.b3d-fb { width: min(520px, calc(100vw - 24px)); }
.b3d-fb__kinds { display: flex; flex-wrap: wrap; flex-direction: row; gap: 6px 16px; margin: 0 0 10px; padding: 0; border: 0; }
.b3d-fb__kinds legend { width: 100%; margin-bottom: 4px; padding: 0; font-size: 14px; font-weight: 700; }
.b3d-fb__kind { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.b3d-field textarea {
	font: inherit; font-size: 16px; font-weight: 400; padding: 9px 11px; color: var(--b3d-ink); resize: vertical; min-height: 110px;
	border: 1px solid rgba(31, 35, 51, 0.25); border-radius: 9px;
}
.b3d-fb .b3d-field__hint { margin: 4px 0 10px; padding: 0; font-weight: 600; color: var(--b3d-ink-soft); background: none; }
.b3d-fb__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.b3d-dialog textarea:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }

@media (max-width: 720px) {
	.b3d-unsaved { top: 66px; width: calc(100% - 16px); padding: 8px 6px 8px 12px; font-size: 13px; }
	.b3d-unsaved__text { flex: 1; }
	.b3d-fbcard { left: 50%; right: auto; transform: translateX(-50%); top: 66px; bottom: auto; }
}
@media (pointer: coarse) {
	.b3d-unsaved button, .b3d-fbcard button { min-height: 44px; }
}

/* ---- Instrukcja krok po kroku ---- */

.b3d-steps {
	left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 6;
	width: min(560px, calc(100% - 28px)); padding: 10px 12px 12px;
}
.b3d-steps[hidden] { display: none; }
.b3d-steps__head { display: flex; align-items: center; gap: 8px; }
.b3d-steps__count { margin-right: auto; font-size: 14px; color: var(--b3d-brand); font-variant-numeric: tabular-nums; }
.b3d-steps__label { margin: 6px 0 10px; min-height: 2.6em; font-size: 16px; font-weight: 700; line-height: 1.3; }
.b3d-steps__nav { display: flex; align-items: center; gap: 10px; }
.b3d-steps__range { flex: 1; min-width: 0; accent-color: var(--b3d-brand); }
.b3d-steps.is-busy .b3d-steps__nav,
.b3d-steps.is-busy .b3d-steps__head button { visibility: hidden; }
.b3d.is-steps .b3d-hint,
.b3d.is-steps .b3d-empty,
.b3d.is-steps .b3d-palette { display: none; } /* paleta (T6b) w instrukcji i tak nic nie robi */
/* Przygotowanie wydruku instrukcji: pasek nieczynny (Esc przerywa). */
.b3d.is-printing .b3d-toolbar { pointer-events: none; opacity: 0.6; }

/* ---- Wąski ekran: okna i karty ---- */

@media (max-width: 720px) {
	.b3d-intro { padding: 16px 14px 0; }
	.b3d-intro__cards { grid-template-columns: 1fr 1fr; gap: 8px; }
	.b3d-intro__card { padding: 10px; }
	.b3d-intro__card svg { width: 40px; height: 40px; }
	.b3d-intro__card p { font-size: 13px; }
	.b3d-dialog__body { padding: 8px 14px 4px; }
	.b3d-dialog__acts { padding: 10px 14px 14px; }
	.b3d-drop > summary { padding: 5px 8px; font-size: 13px; }
	.b3d-banner { bottom: 110px; flex-wrap: wrap; font-size: 13px; }
	.b3d-steps { bottom: 8px; width: calc(100% - 16px); }
	.b3d-mine__acts { width: 100%; }
}
@media (pointer: coarse) {
	.b3d-dialog button, .b3d-steps button, .b3d-banner button { min-height: 44px; }
	.b3d-tools .b3d-drop__menu button { min-height: 44px; }
}

/* ---- Wydruk (lista części, instrukcja) ---- */

.b3d-print { display: none; }
@media print {
	@page { size: A4; margin: 12mm; }
	html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
	.b3d { display: none !important; }
	.b3d-print { display: block; color: #111; font-size: 11pt; }
	.b3d-print__page { break-after: page; page-break-after: always; }
	.b3d-print__page:last-child { break-after: auto; page-break-after: auto; }
	.b3d-print__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8mm; margin: 0 0 5mm; padding-bottom: 2mm; border-bottom: 0.6mm solid #000F99; }
	.b3d-print__head h1 { margin: 0; font-size: 18pt; color: #000F99; }
	.b3d-print__head.is-small h1 { font-size: 13pt; }
	.b3d-print__head p { margin: 0; font-size: 10pt; color: #444; }
	.b3d-print h2 { margin: 6mm 0 2mm; font-size: 13pt; }
	.b3d-print__hero { display: block; width: 100%; max-height: 110mm; object-fit: contain; margin: 0 0 4mm; border: 0.3mm solid #ccd; border-radius: 2mm; }
	.b3d-print .b3d-bom { font-size: 10.5pt; }
	.b3d-print .b3d-bom th, .b3d-print .b3d-bom td { border-bottom: 0.2mm solid #bbb; padding: 1.5mm 2mm; }
	.b3d-print__steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; margin: 0; padding: 0; }
	.b3d-print__step { break-inside: avoid; }
	.b3d-print__step img { display: block; width: 100%; height: auto; border: 0.3mm solid #ccd; border-radius: 2mm; }
	.b3d-print__step p { margin: 2mm 0 0; font-size: 11pt; line-height: 1.35; }
}

/* === koniec 6a === */

/* === 6b === Interakcja: paleta części (przeciągnij i upuść), „Maluj”, menu z „Zamknij”,
   kolor kostki, łączniki tej kostki, strzałki kierunku obrotu. Tylko ten blok należy do T6b. */

.b3d-menu { width: 272px; max-height: calc(100% - 16px); overflow: auto; }
.b3d-menu__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.b3d-menu__head .b3d-menu__title { margin: 4px 2px 0; }
.b3d-menu__close {
	flex: none; display: inline-flex; align-items: center; gap: 4px;
	font: inherit; font-size: 12px; font-weight: 700; color: var(--b3d-ink-soft);
	background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 3px 7px; cursor: pointer;
}
.b3d-menu__close:hover { color: var(--b3d-brand-dark); background: #f1f3fb; border-color: var(--b3d-line); }
.b3d-menu__close:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-menu__parts { grid-template-columns: repeat(3, 1fr); }
.b3d-menu__parts .b3d-part img { width: 44px; height: 44px; }
.b3d-menu__sub { margin: 10px 2px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b3d-ink-soft); }
.b3d-menu__joints { display: flex; flex-direction: column; gap: 4px; }
.b3d-joint-link { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-height: 32px; padding-top: 4px; padding-bottom: 4px; }
.b3d-joint-link small { font-size: 11px; font-weight: 400; color: var(--b3d-ink-soft); white-space: nowrap; }
.b3d-menu__note { margin: 4px 2px 0; font-size: 12px; color: var(--b3d-ink-soft); }
.b3d-act--color { display: flex; align-items: center; gap: 8px; }
.b3d-dot {
	display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 5px;
	background: var(--c, #1e88e5); border: 2px solid rgba(0, 0, 0, 0.18);
}
.b3d-menu__swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.b3d-swatch--big { width: 100%; height: 34px; border-radius: 9px; }

/* Paleta: pionowo z lewej (desktop), poziomo u dołu (wąski ekran).
   v3.1: kolumny minmax(0, 1fr) — kafelek nie rozpycha siatki długim słowem (wcześniej prawa
   kolumna wystawała poza ramkę 140 px); szerszy panel, kolory nowej kostki na górze. */
.b3d-palette {
	left: 14px; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 176px; max-height: calc(100% - 96px); overflow-y: auto; overscroll-behavior: contain;
	padding: 8px; display: flex; flex-direction: column; gap: 6px;
	-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.b3d-palette__head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b3d-ink-soft); margin: 0 2px; }
.b3d-palette__head small { display: block; font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.b3d-palette__colorbox { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--b3d-line); }
.b3d-palette__label { margin: 0 2px; font-size: 11px; font-weight: 700; color: var(--b3d-ink-soft); }
.b3d-palette.is-painting .b3d-palette__label { color: var(--b3d-brand); }
.b3d-palette__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.b3d-pal {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
	min-width: 0; min-height: 60px; padding: 4px 2px 5px; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.15;
	text-align: center; overflow-wrap: anywhere; hyphens: auto;
	color: var(--b3d-ink); background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 10px;
	cursor: grab; touch-action: pan-x pan-y; -webkit-touch-callout: none;
}
.b3d-pal img { width: 40px; height: 40px; pointer-events: none; }
.b3d-pal:hover { background: #eaf3d2; border-color: var(--b3d-lime); }
.b3d-pal:active { cursor: grabbing; }
.b3d-pal:focus-visible,
.b3d-palette__cancel:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-pal[aria-pressed="true"] { background: var(--b3d-brand); color: #fff; border-color: var(--b3d-brand); }
.b3d-pal.is-holding { animation: b3d-hold 0.38s ease-out forwards; }
@keyframes b3d-hold { to { background: #eaf3d2; border-color: var(--b3d-lime); box-shadow: 0 0 0 3px var(--b3d-lime); } }
.b3d-pal--paint { color: var(--b3d-brand-dark); }
.b3d-pal--paint svg { width: 30px; height: 30px; margin: 5px 0 5px; }
.b3d-pal--paint .b3d-dot { position: absolute; top: 5px; right: 6px; width: 13px; height: 13px; border-radius: 4px; }
.b3d-palette__colors { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.b3d-palette__cancel[hidden] { display: none; }
.b3d-palette__colors .b3d-swatch { width: 100%; height: 22px; border-radius: 6px; }
.b3d-palette__cancel {
	font: inherit; font-size: 13px; font-weight: 700; color: var(--b3d-danger); background: #fff;
	border: 1px solid var(--b3d-line); border-radius: 9px; padding: 6px 8px; min-height: 36px; cursor: pointer;
}
.b3d-palette__cancel:hover { background: #fdecea; }

.b3d-drag-chip {
	position: fixed; top: 0; left: 0; z-index: 60; width: 56px; height: 56px; pointer-events: none;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.92); border: 2px solid var(--b3d-lime); border-radius: 12px;
	box-shadow: 0 8px 22px rgba(16, 22, 60, 0.25); will-change: transform;
}
.b3d-drag-chip img { width: 48px; height: 48px; }
.b3d-drag-chip--out { border-color: #c62828; }
.b3d-drag-chip.is-hot { background: #fdecea; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.35), 0 8px 22px rgba(16, 22, 60, 0.25); }

/* Kosz (v3.2): część przeciągana z budowli na paletę — paleta zamienia się w miejsce zrzutu.
   Nakładka .b3d-trash leży w <body> (position: fixed nad paletą), więc kolory wprost, bez zmiennych .b3d. */
.b3d-palette.is-trash { outline: 2px dashed #c62828; outline-offset: 2px; }
.b3d-palette.is-trash > * { visibility: hidden; }
.b3d-trash {
	position: fixed; z-index: 55; pointer-events: none; box-sizing: border-box;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px;
	font-family: inherit; font-size: 14px; line-height: 1.25; text-align: center; color: #c62828;
	background: rgba(253, 236, 234, 0.96); border: 2px dashed #c62828; border-radius: 14px;
	transition: background-color 0.12s ease, transform 0.12s ease;
}
.b3d-trash[hidden] { display: none; }
.b3d-trash b { font-weight: 800; }
.b3d-trash small { font-size: 12px; color: #1f2333; }
.b3d-trash.is-hot { color: #fff; background: rgba(198, 40, 40, 0.95); border-style: solid; transform: scale(1.03); }
.b3d-trash.is-hot small { color: #fff; }
@media (max-width: 720px) { .b3d-trash { flex-direction: row; gap: 10px; font-size: 13px; } .b3d-trash small { display: none; } }
@media (prefers-reduced-motion: reduce) { .b3d-trash { transition: none; } .b3d-trash.is-hot { transform: none; } }

/* Przyciski obrotu: w zablokowaną stronę wyszarzone, „przeskoczy” — pomarańczowa ramka. */
.b3d-float button[data-swing="jump"] { border-color: #f59e0b; }

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
	.b3d-palette {
		top: auto; left: 8px; right: 8px; bottom: 76px; transform: none; width: auto;
		flex-direction: row; align-items: center; padding: 6px; overflow-x: auto; overflow-y: hidden; max-height: none;
	}
	.b3d-palette__head { display: none; }
	/* Kolory na początku paska: dwa rzędy po 6, bez podpisu (jest w aria-label grupy). */
	.b3d-palette__colorbox { flex: none; padding: 0 6px 0 0; border-bottom: 0; border-right: 1px solid var(--b3d-line); }
	.b3d-palette__label { display: none; }
	.b3d-palette__colors { grid-template-columns: repeat(6, 22px); }
	.b3d-palette__items { display: flex; gap: 5px; }
	/* Stała szerokość kafelka: „Kwadratowy” mieści się w jednej linii, bez łamania w środku słowa. */
	.b3d-pal { flex: none; width: 68px; min-height: 58px; font-size: 10.5px; overflow-wrap: normal; }
	.b3d-palette__cancel { flex: none; }
	/* Lista części nad paletą (nie pod nią). */
	.b3d-parts { bottom: 176px; max-height: 30vh; }
	.b3d-menu { width: min(272px, calc(100% - 16px)); }
}

@media (pointer: coarse) {
	.b3d-pal { min-height: 60px; }
	.b3d-menu__close { min-height: 40px; padding: 4px 10px; }
	.b3d-joint-link { min-height: 44px; }
	/* Dotyk: kolory po 36 px — w kolumnie palety (≈ 158 px) mieszczą się 4, nie 6 (fix 1, v3.1). */
	.b3d-palette__colors { grid-template-columns: repeat(4, minmax(36px, 1fr)); }
	.b3d-palette__colors .b3d-swatch { min-width: 36px; height: 36px; }
	.b3d-stick__input { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 720px) {
	/* Pasek u dołu: stałe kolumny po 36 px (nie dzielą wspólnej szerokości, więc nie nachodzą). */
	.b3d-palette__colors { grid-template-columns: repeat(4, 36px); }
	/* Kolory w 3 rzędach — pasek palety wyższy, lista części nad nim. */
	.b3d-parts { bottom: 216px; }
	/* Przegląd UX 2026-10-21b: kafelki części w DWÓCH rzędach (ta sama wysokość paska co 3 rzędy kolorów) —
	   na 390 px widać 6 części zamiast 2,5; Koło i Śrubka są o jedno przesunięcie palcem bliżej. */
	.b3d-palette__items { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, 60px); grid-auto-columns: 68px; gap: 4px 5px; }
	.b3d-pal { min-height: 0; height: 60px; padding: 2px 2px 3px; }
	.b3d-pal img { width: 32px; height: 32px; }
	.b3d-pal--paint svg { width: 24px; height: 24px; margin: 2px 0; }
	/* Da się przewinąć dalej (palette.js: is-more) — prawa krawędź paska gaśnie. */
	.b3d-palette.is-more {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, 0.25));
		mask-image: linear-gradient(to right, #000 calc(100% - 44px), rgba(0, 0, 0, 0.25));
	}
}

/* Kij: własna długość w cm (menus.js) */
.b3d-stick { margin: 8px 2px 0; }
.b3d-stick__label {
	display: block; margin: 0 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--b3d-ink-soft);
}
.b3d-stick__row { display: flex; align-items: center; gap: 6px; }
.b3d-stick__input {
	width: 86px; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 15px; font-weight: 700;
	color: var(--b3d-ink); background: #fff; border: 1px solid rgba(31, 35, 51, 0.25); border-radius: 9px;
}
.b3d-stick__input:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-stick__unit { font-size: 13px; font-weight: 700; color: var(--b3d-ink-soft); }
.b3d-stick .b3d-stick__go { flex: 1; width: auto; text-align: center; color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-stick .b3d-stick__go:hover { background: var(--b3d-brand-dark); }
.b3d-stick .b3d-menu__note { margin: 6px 0 0; }
@media (prefers-reduced-motion: reduce) { .b3d-pal.is-holding { animation: none; box-shadow: 0 0 0 3px var(--b3d-lime); } }
/* === koniec 6b === */

/* === 6c === Fizyka, strzałka „przewróci się”, Lżejszy widok, awaria WebGL (editor/physics-ui.js,
   editor/stability-ui.js, editor/scene.js) === */

/* Fizyka: po prawej stronie paska, zawsze widoczna; „Zatrzymaj” / „Od nowa” tylko w trakcie. */
.b3d-phys { flex-wrap: nowrap; }
.b3d-tools .b3d-phys__toggle { font-weight: 800; border-color: var(--b3d-lime); box-shadow: inset 0 0 0 1px var(--b3d-lime); }
.b3d-tools .b3d-phys__toggle:hover:not(:disabled) { background: #f4f9e6; border-color: var(--b3d-lime); }
/* Włączona — wypełniona także pod kursorem / po stuknięciu (inaczej :hover dawał jasne tło z białym napisem). */
.b3d-tools .b3d-phys__toggle[aria-pressed="true"],
.b3d-tools .b3d-phys__toggle[aria-pressed="true"]:hover:not(:disabled) { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); box-shadow: none; }
@media (max-width: 720px) {
	/* Fizyka w trakcie: „Zatrzymaj” / „Od nowa” krócej (mieszczą się w jednym rzędzie). */
	.b3d-phys button { padding-left: 7px; padding-right: 7px; }
}
/* Fizyka włączona: paleta części nieaktywna (budowanie wyłączone). */
.b3d.is-physics .b3d-palette { opacity: 0.5; }
/* Podpowiedź (stan fizyki, komunikaty) zawsze nad paletą. */
.b3d-hint { z-index: 7; }
/* Wąski ekran: paleta leży u dołu nad podpowiedzią — przy fizyce i tak nic nie robi, więc znika. */
@media (max-width: 720px) {
	.b3d.is-physics .b3d-palette { display: none; }
}
.b3d-tools button.is-suggested { border-color: var(--b3d-lime); box-shadow: 0 0 0 3px rgba(164, 198, 58, 0.45); }

/* Po wymianie renderera pierwsze płótno zostaje przezroczystą warstwą zdarzeń na wierzchu. */
.b3d-scene canvas.b3d-surface { position: absolute; inset: 0; opacity: 0; }

.b3d-tip {
	position: absolute;
	transform: translate(-50%, -50%);
	width: max-content;
	max-width: min(220px, calc(100% - 16px));
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: #fff;
	background: #c62828;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(198, 40, 40, 0.3);
	pointer-events: none;
}
.b3d-tip[hidden] { display: none; }
.b3d-tip small { display: block; font-size: 11px; font-weight: 600; opacity: 0.9; }

.b3d-glfail {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(420px, calc(100% - 32px));
	padding: 18px 20px;
	text-align: center;
	color: var(--b3d-ink);
	background: var(--b3d-panel);
	border: 1px solid var(--b3d-line);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(29, 23, 75, 0.15);
}
.b3d-glfail[hidden] { display: none; }
.b3d-glfail__title { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--b3d-brand-dark); }
.b3d-glfail__text { margin: 0 0 14px; font-size: 14px; color: var(--b3d-ink-soft); }
.b3d-glfail__retry {
	min-height: 44px;
	padding: 8px 18px;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--b3d-brand);
	border: 0;
	border-radius: 10px;
	cursor: pointer;
}
.b3d-glfail__retry:hover { background: var(--b3d-brand-dark); }
.b3d-glfail__retry:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
/* Fizyka włączona: Cofnij / Ponów i tak nieczynne — same ikony, żeby „Zatrzymaj” / „Od nowa” zmieściły się w rzędzie. */
.b3d.is-physics .b3d-ibtn span { display: none; }

/* === v3.3 === Pasek z ikonami (editor/icons.js), „Sprawdź stabilność” (physics-ui.js), karta wyniku,
   dymek ostrzeżenia w trakcie budowania (stability-ui.js), Dźwięki / Muzyka na pasku. */

/* ---- Pasek: ikona + krótki napis, wtórne akcje samą ikoną ---- */
.b3d-toolbar { gap: 6px 8px; padding: 7px 8px; }
.b3d-ico { flex: none; display: block; }
.b3d-tools button,
.b3d-drop > summary { display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.b3d-tools button .b3d-ico,
.b3d-drop > summary .b3d-ico { color: var(--b3d-brand); }
.b3d-tools button:disabled .b3d-ico { color: inherit; }
.b3d-drop > summary { padding: 6px 10px; }
/* Cofnij / Ponów, Dźwięki, Muzyka: same ikony (nazwa w aria-label i dymku title). */
.b3d-tools .b3d-ibtn { justify-content: center; min-width: 36px; padding: 6px 8px; }
.b3d-ibtn > span { display: none; }
.b3d-tools--history { gap: 4px; }
.b3d-tools--aux { gap: 4px; flex-wrap: nowrap; }
/* Przełączniki-ikony: włączony = zwykły przycisk z ikoną marki, wyłączony = przekreślona, wyszarzona. */
.b3d-tools .b3d-ibtn--toggle[aria-pressed="true"] { color: var(--b3d-brand-dark); background: #fff; border-color: var(--b3d-line); }
.b3d-tools .b3d-ibtn--toggle[aria-pressed="true"]:hover:not(:disabled) { color: var(--b3d-brand-dark); background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-ibtn--toggle .b3d-ico--off { display: none; }
.b3d-ibtn--toggle[aria-pressed="false"] .b3d-ico--on { display: none; }
.b3d-ibtn--toggle[aria-pressed="false"] .b3d-ico--off { display: block; color: var(--b3d-ink-soft); }
/* Pozycje rozwijanych menu: ikona + napis w rzędzie. */
.b3d-tools .b3d-drop__menu button,
.b3d-drop__link { display: flex; align-items: center; gap: 10px; }
.b3d-drop__link .b3d-ico { color: var(--b3d-brand); }
.b3d-tools .b3d-drop__menu button.is-danger .b3d-ico { color: var(--b3d-danger); }
.b3d-tools .b3d-drop__menu .b3d-toggle { gap: 10px; }
.b3d-tools .b3d-drop__menu .b3d-toggle::after { margin-left: auto; }
.b3d-drop__menu .b3d-toggle kbd { margin-right: 0; }
/* Pomoc: na pasku obok dźwięków (szeroki ekran), w „Menu” na wąskim. */
.b3d-only-narrow { display: none !important; }

/* ---- „Sprawdź stabilność”: główny, zielony ---- */
.b3d-tools .b3d-phys__toggle {
	gap: 7px; padding: 7px 14px 7px 11px; font-weight: 800; color: var(--b3d-brand-dark);
	background: var(--b3d-lime); border-color: #8fb02c; box-shadow: 0 3px 10px rgba(110, 145, 20, 0.35);
}
.b3d-tools .b3d-phys__toggle .b3d-ico { color: var(--b3d-brand-dark); }
.b3d-tools .b3d-phys__toggle:hover:not(:disabled) { background: #b4d24f; border-color: #7f9e22; }
.b3d-tools .b3d-phys__toggle:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 4px rgba(110, 145, 20, 0.35); }
.b3d-tools .b3d-phys__toggle:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-tools .b3d-phys__toggle:disabled { box-shadow: none; }
/* W trakcie sprawdzania: „Wróć do budowania” — granatowy. */
.b3d-tools .b3d-phys__toggle[aria-pressed="true"],
.b3d-tools .b3d-phys__toggle[aria-pressed="true"]:hover:not(:disabled) { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); box-shadow: none; }
.b3d-tools .b3d-phys__toggle[aria-pressed="true"] .b3d-ico { color: #fff; }
.b3d-phys__short { display: none; }

/* ---- Karta: „Sprawdzam stabilność…” / wynik ---- */
.b3d-result {
	left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 8;
	width: min(420px, calc(100% - 16px)); padding: 12px 14px;
	border-width: 2px;
}
.b3d-result[hidden] { display: none; }
.b3d-result.is-ok { border-color: var(--b3d-lime); }
.b3d-result.is-bad { border-color: #ef9a9a; }
.b3d-result__head { display: flex; align-items: center; gap: 10px; }
.b3d-result__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--b3d-brand); background: #eef1fb; }
.b3d-result.is-ok .b3d-result__ico { color: #3b6d11; background: #eef6dc; }
.b3d-result.is-bad .b3d-result__ico { color: var(--b3d-danger); background: #fdecea; }
.b3d-result__title { margin: 0; font-size: 18px; font-weight: 800; color: var(--b3d-brand-dark); line-height: 1.25; }
.b3d-result__lines { margin: 8px 0 0; padding: 0 0 0 46px; list-style: none; font-size: 14px; line-height: 1.4; color: var(--b3d-ink); }
.b3d-result__lines li + li { margin-top: 3px; }
.b3d-result__lines small { font-size: 12px; color: var(--b3d-ink-soft); }
.b3d-result__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.b3d-result__acts button {
	display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 700;
	color: var(--b3d-brand-dark); background: #fff; border: 1px solid var(--b3d-line); border-radius: 10px; cursor: pointer;
}
.b3d-result__acts button:hover { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-result__acts button.is-main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-result__acts button.is-main:hover { background: var(--b3d-brand-dark); }
.b3d-result__acts button[hidden] { display: none; }
.b3d-result__acts button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-result.is-busy .b3d-result__lines { color: var(--b3d-ink-soft); font-size: 13px; }
.b3d-spin { animation: b3d-spin 0.9s linear infinite; }
@keyframes b3d-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .b3d-spin { animation: none; } }
/* Karta mówi to samo co podpowiedź — podpowiedź pod nią zostaje dla czytników ekranu. */
.b3d.is-physics .b3d-hint { opacity: 0; }

/* ---- Dymek ostrzeżenia (w trakcie budowania) ---- */
.b3d-warn {
	z-index: 6; transform: translate(-50%, -50%); width: max-content; max-width: min(320px, calc(100% - 16px));
	display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px 9px 10px;
	border: 2px solid #ef9a9a; background: #fff; pointer-events: none;
}
.b3d-warn[hidden] { display: none; }
.b3d-warn::after {
	content: ""; position: absolute; left: 50%; bottom: -8px; width: 14px; height: 14px; margin-left: -7px;
	background: #fff; border-right: 2px solid #ef9a9a; border-bottom: 2px solid #ef9a9a; transform: rotate(45deg);
}
.b3d-warn__ico { flex: none; color: var(--b3d-danger); padding-top: 1px; }
.b3d-warn__text { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--b3d-ink); }
.b3d-warn__text small { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--b3d-ink-soft); }
.b3d-warn__acts { display: flex; gap: 6px; margin-top: 8px; }
.b3d-warn__acts button {
	pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 4px 11px;
	font: inherit; font-size: 13px; font-weight: 700; color: var(--b3d-brand-dark); background: #fff;
	border: 1px solid var(--b3d-line); border-radius: 8px; cursor: pointer;
}
.b3d-warn__acts button[data-warn="undo"] { color: #fff; background: var(--b3d-danger); border-color: var(--b3d-danger); }
.b3d-warn__acts button[data-warn="undo"]:hover { background: #a31f1f; }
.b3d-warn__acts button[data-warn="keep"]:hover { background: #f1f3fb; }
.b3d-warn__acts button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .b3d-warn:not([hidden]) { animation: b3d-pop 0.18s ease-out; } }
@keyframes b3d-pop { from { opacity: 0; } to { opacity: 1; } }

/* ---- Pomoc: krok 5 „Sprawdź” — karta na całą szerokość siatki, z kopią zielonego przycisku z paska ---- */
.b3d-intro__card--check {
	grid-column: 1 / -1; display: flex; align-items: center; gap: 18px;
	background: #f4f9e6; border-color: rgba(164, 198, 58, 0.55);
}
.b3d-intro__check-text { flex: 1; min-width: 0; }
.b3d-intro__chip {
	flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px;
	font-size: 15px; font-weight: 800; color: var(--b3d-brand-dark); background: #fff;
	border: 1px solid var(--b3d-lime); box-shadow: inset 0 0 0 1px var(--b3d-lime); border-radius: 9px; white-space: nowrap;
}
.b3d-intro__card .b3d-intro__chip svg { flex: none; width: 18px; height: 18px; margin: 0; }
/* Przyciski okna zawsze widoczne — przy przewijaniu treści przyklejone do dołu. */
.b3d-intro .b3d-dialog__acts { position: sticky; bottom: 0; background: #fff; }
@media (max-width: 720px) {
	/* Telefon: jedna kolumna, ikona z lewej — krócej niż dwie wąskie kolumny. */
	.b3d-intro__cards { grid-template-columns: 1fr; }
	.b3d-intro__card { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: start; }
	.b3d-intro__card svg { grid-row: span 2; width: 36px; height: 36px; margin: 0; }
	.b3d-intro__card h3 { font-size: 16px; margin-bottom: 2px; }
	.b3d-intro__card--check { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
	.b3d-intro .b3d-dialog__acts { padding: 12px 0 14px; box-shadow: 0 -10px 14px -12px rgba(31, 35, 51, 0.35); }
}

/* ---- Paleta: ikona przy nagłówku ---- */
.b3d-palette__head .b3d-ico { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--b3d-brand); }

/* ---- Wąski ekran ---- */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
	.b3d-only-narrow { display: flex !important; }
	.b3d-only-wide { display: none !important; }
	.b3d-tools--aux { order: 1; }
	.b3d-tools .b3d-phys__toggle { padding: 6px 11px 6px 9px; }
	.b3d-menubar.is-narrow > summary .b3d-ico { color: var(--b3d-brand); }
	.b3d-menubar.is-narrow .b3d-drop > summary { display: flex; }
	.b3d-result { bottom: 58px; }
	/* Na telefonie lista części leży u dołu po prawej — przy sprawdzaniu ustępuje karcie. */
	.b3d.is-physics .b3d-parts { display: none; }
}
/* Telefon: „Sprawdź” krócej (pełna nazwa w aria-label i dymku), marka ustępuje przyciskom. */
@media (max-width: 480px) {
	.b3d-phys__txt { display: none; }
	.b3d-phys__short { display: inline; }
}
@media (max-width: 420px) {
	.b3d-brand, .b3d-brand.is-stacked { display: none; }
}
@media (pointer: coarse) {
	.b3d-tools .b3d-ibtn { min-width: 44px; min-height: 44px; }
	.b3d-tools .b3d-phys__toggle { min-height: 44px; }
	.b3d-result__acts button { min-height: 44px; }
	.b3d-warn__acts button { min-height: 44px; padding: 6px 14px; }
	.b3d-tools .b3d-drop__menu button,
	.b3d-drop__link { min-height: 44px; }
}

/* === v3.5 === „Jedź” (editor/physics-ui.js, Ruling 37): karta jazdy z licznikiem drogi i sterowaniem Wstecz / Stop / Naprzód.
   v5 F1: przycisk „Jedź” na pasku zniknął — jazda to zakładka karty „Testuj” (sekcja .b3d-try na końcu pliku). */

.b3d-drive[hidden] { display: none; }
.b3d-drive__meter { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0 46px; }
.b3d-drive__dist { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--b3d-brand-dark); font-variant-numeric: tabular-nums; }
.b3d-drive__speed { font-size: 14px; font-weight: 700; color: var(--b3d-ink-soft); font-variant-numeric: tabular-nums; }
.b3d-drive__pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.b3d-drive__pad button {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	min-height: 56px; padding: 6px 4px; font: inherit; font-size: 14px; font-weight: 800; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 12px; cursor: pointer;
	touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.b3d-drive__pad button .b3d-ico { color: var(--b3d-brand); }
.b3d-drive__pad button:hover:not(:disabled) { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-drive__pad button.is-on { color: var(--b3d-brand-dark); background: var(--b3d-lime); border-color: #7f9e22; }
.b3d-drive__pad button.is-on .b3d-ico { color: var(--b3d-brand-dark); }
.b3d-drive__pad button[data-drive="0"].is-on { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-drive__pad button[data-drive="0"].is-on .b3d-ico { color: #fff; }
.b3d-drive__pad button:disabled { opacity: 0.4; cursor: default; }
.b3d-drive__pad button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-drive__pad button[data-drive="0"]:focus-visible { outline-color: var(--b3d-brand); }
.b3d-result.is-drive .b3d-result__ico { color: var(--b3d-brand); background: #eef1fb; }
.b3d-result.is-drive.is-ok .b3d-result__ico { color: #3b6d11; background: #eef6dc; }
.b3d-result.is-drive.is-bad .b3d-result__ico { color: var(--b3d-danger); background: #fdecea; }

@media (max-width: 720px) {
	/* Pasek: „Jedź” tuż przed „Sprawdź” (grupa fizyki jest tu display: contents). */
	.b3d-drive__meter { margin-left: 0; }
	.b3d-result.is-drive .b3d-result__lines { padding-left: 0; }
}
/* Wąsko: „Jedź” samą ikoną autka (nazwa w aria-label i dymku). Telefon: gdy „Jedź” jest (budowla z kołami),
   ustępuje mu przełącznik Dźwięki (zostaje w Menu → Widok) — Cofnij / Ponów, Jedź, Sprawdź i Menu mieszczą się
   w jednym rzędzie od 360 px. */
@media (max-width: 420px) {
	/* Telefon: karta jazdy zwięźlej — licznik i trzy duże przyciski zostają. */
	.b3d-result.is-drive { padding: 10px 10px; }
	.b3d-drive__dist { font-size: 24px; }
}
@media (pointer: coarse) {
	.b3d-drive__pad button { min-height: 60px; }
}

/* === v3.6 jazda === „Jedź” (editor/physics-ui.js, Ruling 38): skręt W lewo / W prawo (drugi rząd pod
   Wstecz / Stop / Naprzód, przytrzymane skręcają), „do mety” w liczniku. Blok tylko dopisany na końcu pliku. */
.b3d-drive__meter { flex-wrap: wrap; row-gap: 2px; }
.b3d-drive__goal { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 14px; font-weight: 800; color: var(--b3d-brand-dark); white-space: nowrap; font-variant-numeric: tabular-nums; }
.b3d-drive__goal[hidden] { display: none; }
.b3d-drive__goal .b3d-ico { color: var(--b3d-brand); }
.b3d-drive__pad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.b3d-drive__pad [data-drive] { grid-column: span 2; }
/* v5 F0: Naprzód / Wstecz trzymane palcem — bez przewijania karty i dymka „długiego dotyku” (inaczej pointercancel = stop). */
.b3d-drive__pad [data-drive="1"], .b3d-drive__pad [data-drive="-1"] { touch-action: none; -webkit-touch-callout: none; }
.b3d-drive__pad .b3d-drive__steer {
	grid-column: span 3; flex-direction: row; gap: 8px; min-height: 48px;
	touch-action: none; -webkit-touch-callout: none;
}
.b3d-drive__pad .b3d-drive__steer.is-on { color: var(--b3d-brand-dark); background: var(--b3d-lime); border-color: #7f9e22; }
.b3d-drive__pad .b3d-drive__steer:disabled { opacity: 0.4; }
@media (max-width: 420px) {
	/* Telefon: dwa rzędy przycisków zamiast jednego — niższe, ikona obok napisu (karta nie zasłania pojazdu). */
	.b3d-drive__pad { gap: 6px; margin-top: 8px; }
	.b3d-drive__pad button { flex-direction: row; gap: 5px; min-height: 48px; padding: 4px 4px; font-size: 13px; }
	.b3d-drive__goal { font-size: 13px; }
}
@media (pointer: coarse) {
	.b3d-drive__pad .b3d-drive__steer { min-height: 56px; }
}
@media (pointer: coarse) and (max-width: 420px) {
	.b3d-drive__pad button, .b3d-drive__pad .b3d-drive__steer { min-height: 50px; }
}

/* === v3.7 skrętna oś === „Jedź” (editor/physics-ui.js, Ruling 39): mały „skręt 20° w lewo” w liczniku, gdy pojazd
   skręca skrętną osią (łącznik obrotowy) i oś jest skręcona. Po prędkości, przed „do mety”. Blok tylko dopisany. */
.b3d-drive__steerdeg {
	order: 1; font-size: 13px; font-weight: 700; color: var(--b3d-ink-soft);
	white-space: nowrap; font-variant-numeric: tabular-nums;
}
.b3d-drive__steerdeg[hidden] { display: none; }
.b3d-drive__goal { order: 2; }
@media (max-width: 420px) {
	.b3d-drive__steerdeg { font-size: 12px; }
}

/* === v4 nowe części === */
/* Paleta ma 4 kafelki więcej (Zębatka, Sznurek, Gumka, Spiner): wyśrodkowana w pionie sięgała pod drugi rząd
   paska narzędzi (Jedź / Sprawdź stabilność przy 1280 px) i go zasłaniała. Na szerokim ekranie zaczyna się
   pod paskiem (dwa rzędy ≈ 104 px), a nadmiar przewija się w niej. Wąski ekran (≤ 720 px) — bez zmian. */
@media (min-width: 721px) and (min-height: 501px) {
	/* Ruling 296: nigdy wyżej niż dół paska (--b3d-toolbar-bottom z panels.js — pasek z linią limitu pod nim). */
	.b3d-palette { top: max(116px, calc(var(--b3d-toolbar-bottom, 0px) + 8px)); transform: none; max-height: calc(100% - max(116px, calc(var(--b3d-toolbar-bottom, 0px) + 8px)) - 16px); }
}

/* === v4.2 kolory łączników === */
/* Wiersz „Kolor” w menu części (łącznik, koło, śrubka, sznurek / gumka, mini kostka, trzpień): 11 kolorów palety +
   „domyślny”; wiersz „Wielkość” gumki (menu gumki i pasek przy zaczepianiu). */
.b3d-partcolor,
.b3d-sizes { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--b3d-line); }
.b3d-partcolor__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 5px; }
.b3d-partcolor__label { display: block; margin: 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b3d-ink-soft); }
.b3d-partcolor__swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.b3d-partcolor__swatches .b3d-swatch { width: 100%; height: 26px; }
.b3d-partcolor__default {
	display: inline-flex; align-items: center; gap: 5px; min-height: 26px;
	font: inherit; font-size: 12px; font-weight: 700; color: var(--b3d-brand-dark);
	background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 7px; padding: 0 8px; cursor: pointer;
}
.b3d-partcolor__default:hover { background: #eaf3d2; border-color: var(--b3d-lime); }
.b3d-partcolor__default .b3d-dot { width: 12px; height: 12px; border-radius: 4px; }
.b3d-partcolor__default[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--b3d-brand); }
.b3d-partcolor__default:focus-visible,
.b3d-size:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.b3d-sizes .b3d-partcolor__label { flex-basis: 100%; }
.b3d-size {
	flex: 1 1 0; min-height: 32px; font: inherit; font-size: 12px; font-weight: 700; color: var(--b3d-brand-dark);
	background: #f5f7fd; border: 1px solid var(--b3d-line); border-radius: 8px; padding: 2px 8px; cursor: pointer;
}
.b3d-size:hover { background: #eaf3d2; border-color: var(--b3d-lime); }
.b3d-size[aria-pressed="true"],
.b3d-size[aria-pressed="true"]:hover { background: var(--b3d-brand); color: #fff; border-color: var(--b3d-brand); }
/* Na pasku przy zaczepianiu gumki: jeden rząd, bez podpisu (jest w aria-label grupy). */
.b3d-float .b3d-sizes { margin: 0; padding: 0; border: 0; flex-wrap: nowrap; }
.b3d-float .b3d-sizes .b3d-partcolor__label { display: none; }
.b3d-float .b3d-size { flex: none; }
/* Paleta na szerokim ekranie (od v4 przewija się w pionie): pasek przewijania Windows (17 px) zjadał szerokość kafelków
   i podpisy łamały się w środku słowa („Kwadratow|y”, „Uniwersaln|y”). Miejsce na pasek zarezerwowane na stałe, panel
   o 16 px szerszy, a słowa nie dzielą się nigdy (tests/smoke-v42.mjs sprawdza 1280×800, 1024×768 i 390×844). */
@media (min-width: 721px) and (min-height: 501px) {
	.b3d-palette { width: 192px; scrollbar-gutter: stable; }
	.b3d-pal { overflow-wrap: normal; hyphens: manual; }
}
@media (pointer: coarse) {
	.b3d-partcolor__swatches .b3d-swatch,
	.b3d-partcolor__default { min-height: 36px; height: 36px; }
	.b3d-size { min-height: 44px; }
}

/* === „Szkicownik, nie zamiast kostek” (2026-10-22): pasek we wprowadzeniu + karta przerwy === */
.b3d-screen { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff6ec; border: 1px solid rgba(251, 140, 0, 0.35); font-size: 14px; line-height: 1.45; color: var(--b3d-brand-dark); }
.b3d-screen p { margin: 0; }
.b3d-screen__age { margin-top: 6px !important; font-size: 13px; color: var(--b3d-ink-soft); }
.b3d-screen__more { font: inherit; font-weight: 700; color: var(--b3d-brand); background: none; border: 0; padding: 0 0 0 4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.b3d-screen__more:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; border-radius: 4px; }
.b3d-screen__long { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(251, 140, 0, 0.45); font-size: 13.5px; }
.b3d-screen__long p + p { margin-top: 6px; }
.b3d-break { border-color: rgba(251, 140, 0, 0.5); }
.b3d-break .b3d-fbcard__acts { flex-wrap: wrap; }
.b3d-break [hidden] { display: none; }


/* === v4.1 interakcje === „Pobaw się” (editor/play-ui.js + physics-ui.js, Ruling 62–70): przycisk w rogu sceny
   i karta zabaw — rzędy przycisków (korba, chód, katapulta, wciągarka, spiner),
   tylko te, do których budowla ma części. Przytrzymywane przyciski (.b3d-play__hold) działają, póki palec / mysz. */
.b3d-play[hidden] { display: none; }
.b3d-play { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.b3d-play__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.b3d-play__lbl { flex: 1 0 100%; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--b3d-ink-soft); }
.b3d-play__row > button {
	flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 48px; padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 800; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 12px; cursor: pointer;
	touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.b3d-play__row > button .b3d-ico { color: var(--b3d-brand); }
.b3d-play__row > button:hover:not(:disabled) { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-play__row > button.is-on,
.b3d-play__row > button[aria-pressed="true"] { background: var(--b3d-lime); border-color: #7f9e22; }
.b3d-play__row > button.is-on .b3d-ico,
.b3d-play__row > button[aria-pressed="true"] .b3d-ico { color: var(--b3d-brand-dark); }
.b3d-play__row > button.is-main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-play__row > button.is-main .b3d-ico { color: #fff; }
.b3d-play__row > button:focus-visible,
.b3d-play__chip:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-play__chips { display: inline-flex; gap: 4px; flex: 1 0 100%; }
.b3d-play__chip {
	flex: 1 1 0; min-height: 40px; padding: 4px 8px; font: inherit; font-size: 15px; font-weight: 800; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums;
	touch-action: manipulation;
}
.b3d-play__chip[aria-pressed="true"] { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-play__out { margin: 0; font-size: 15px; line-height: 1.35; color: var(--b3d-brand-dark); }
.b3d-play__out[hidden] { display: none; }
.b3d-play__out small { font-size: 12px; color: var(--b3d-ink-soft); font-variant-numeric: tabular-nums; }
.b3d-result.is-play .b3d-result__ico { color: var(--b3d-brand); background: #eef6dc; }
@media (min-width: 1024px) {
	/* Szeroko: karta zabaw z prawej (zamiast listy części), budowla i miejsce zabawy zostają widoczne po lewej. */
	.b3d.is-play .b3d-parts { display: none; }
	.b3d-result.is-play {
		left: auto; right: 16px; bottom: 16px; transform: none; width: 380px;
		max-height: calc(100% - 96px); overflow-y: auto;
	}
}
@media (min-width: 721px) {
	/* Szeroko: etykieta rzędu obok przycisków, nie nad nimi. */
	.b3d-play__lbl { flex: 0 0 auto; min-width: 9.5em; }
	.b3d-play__row--cat .b3d-play__chips { flex: 0 1 auto; }
}
@media (max-width: 720px) {
	.b3d-result.is-play .b3d-result__lines { padding-left: 0; }
}
/* v5 F1: duży przycisk „Pobaw się” w rogu sceny (.b3d-playfab) zniknął — zabawy to zakładki karty „Testuj”. */
@media (max-width: 420px) {
	.b3d-result.is-play { padding: 10px 10px; max-height: 58vh; overflow-y: auto; }
	.b3d-result.is-play .b3d-result__lines { font-size: 13px; }
	.b3d-play { gap: 6px; margin-top: 8px; }
	.b3d-play__row > button { min-height: 46px; padding: 4px 6px; font-size: 13px; }
	.b3d-play__lbl { font-size: 11px; }
}
@media (pointer: coarse) {
	.b3d-play__row > button { min-height: 52px; }
	.b3d-play__chip { min-height: 44px; }
}


/* === v5 F1 === „Testuj” (editor/physics-ui.js + editor/try-ui.js, Ruling 77–84, plan interakcje-v5-plan.md §3.4): jeden
   zielony przycisk na pasku, karta próby z chipem werdyktu, paskiem zapasu, zakładkami narzędzi, krokami strzału 1-2-3
   i padem jazdy; na telefonie karta zwijana. W trakcie próby na pasku tylko „Wróć do budowania” (bez „Przywróć poprzedni”). */
.b3d.is-physics .b3d-tools--end [data-act="restore"] { display: none; }
/* Zaproszenie do uwag i przypomnienie o przerwie nie pojawiają się w trakcie testu (feedback.js, break.js) — a gdy już
   były widoczne, nie zasłaniają karty próby (ta sama strona ekranu); po „Wróć” wracają. */
.b3d.is-physics #b3d-feedback-card,
.b3d.is-physics #b3d-break { display: none; }

.b3d-try[hidden],
.b3d-try__top[hidden],
.b3d-try__chip[hidden],
.b3d-try__margin[hidden],
.b3d-try__why[hidden],
.b3d-try__more[hidden],
.b3d-try__tabs[hidden],
.b3d-result__head[hidden] { display: none; }
.b3d-try { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.b3d-try__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 28px; }
.b3d-try__chip {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px 3px 7px; border-radius: 999px;
	font-size: 14px; font-weight: 800; line-height: 1.25; border: 1px solid transparent;
}
.b3d-try__chip-ico { display: grid; place-items: center; }
.b3d-try__chip[data-tone="ok"] { color: #2f5a0c; background: #eef6dc; border-color: #b9d67a; }
.b3d-try__chip[data-tone="warn"] { color: #7a4b00; background: #fff4dd; border-color: #f3c56b; }
.b3d-try__chip[data-tone="bad"] { color: #8e1c1c; background: #fdecea; border-color: #f2a9a5; }
.b3d-try__margin { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--b3d-ink-soft); }
.b3d-try__bar { position: relative; width: 64px; height: 8px; border-radius: 999px; background: #e6e9f2; overflow: hidden; }
.b3d-try__bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--b3d-lime); }
.b3d-try__margin[data-level="sredni"] .b3d-try__bar i { background: #f2b33d; }
.b3d-try__margin[data-level="maly"] .b3d-try__bar i { background: #e57373; }
.b3d-try__why { margin: -2px 0 0; font-size: 12.5px; line-height: 1.35; color: var(--b3d-ink-soft); }
.b3d-try__more {
	margin-left: auto; display: inline-flex; align-items: center; gap: 3px; min-height: 36px; padding: 3px 10px 3px 7px;
	font: inherit; font-size: 13px; font-weight: 700; color: var(--b3d-brand-dark);
	background: #fff; border: 1px solid var(--b3d-line); border-radius: 999px; cursor: pointer;
}
.b3d-try__more .b3d-ico { color: var(--b3d-brand); }
/* Zakładki: ikona + podpis pod spodem; 1–5 w rzędzie (każda najwyżej 96 px), więcej — drugi rząd. */
.b3d-try__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.b3d-try__tab {
	flex: 1 1 0; min-width: 58px; max-width: 96px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
	padding: 5px 2px 4px; font: inherit; font-size: 11.5px; font-weight: 800; line-height: 1.15; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 12px; cursor: pointer; touch-action: manipulation;
}
.b3d-try__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b3d-try__tab .b3d-ico { color: var(--b3d-brand); }
.b3d-try__tab:hover { background: #f4f9e6; border-color: rgba(127, 158, 34, 0.6); }
.b3d-try__tab[aria-selected="true"],
.b3d-try__tab[aria-selected="true"]:hover { background: var(--b3d-lime); border-color: #7f9e22; }
.b3d-try__tab[aria-selected="true"] .b3d-ico { color: var(--b3d-brand-dark); }
.b3d-try__tab:focus-visible,
.b3d-try__more:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
/* Nagłówek karty schowany w trakcie narzędzia — opis i licznik bez wcięcia pod ikonę. */
.b3d-result__head[hidden] + .b3d-result__lines { margin-top: 0; padding-left: 0; }
.b3d-result__head[hidden] ~ .b3d-drive .b3d-drive__meter { margin-left: 0; }
.b3d-result.is-tools .b3d-result__lines:empty { display: none; }

/* Komputer: karta po prawej przez całą próbę (werdykt i narzędzia), lista części schowana — budowla zostaje widoczna. */
@media (min-width: 1024px) {
	.b3d.is-physics .b3d-parts { display: none; }
	.b3d-result.is-try {
		left: auto; right: 16px; bottom: 16px; transform: none; width: 380px;
		max-height: calc(100% - 96px); overflow-y: auto;
	}
}

/* Karta próby jest wąska (380 px): podpis rzędu nad przyciskami, napisy przycisków bez łamania („W lewo” w jednej linii). */
.b3d-result.is-try .b3d-play__lbl { flex: 1 0 100%; min-width: 0; }
.b3d-play__row > button,
.b3d-play__stepbody > button { white-space: nowrap; }
/* Strzał: 3 numerowane kroki, aktywny krok z limonkową obwódką. */
.b3d-play__row--cat > .b3d-play__lbl { flex: 1 0 100%; min-width: 0; }
.b3d-play__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; flex: 1 0 100%; }
.b3d-play__step {
	display: flex; align-items: center; gap: 8px;
	padding: 5px 6px; border: 2px solid transparent; border-radius: 12px;
}
.b3d-play__step.is-active { border-color: var(--b3d-lime); background: #f7fbec; }
.b3d-play__num {
	flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	font-size: 13px; font-weight: 800; color: #fff; background: #b8bdd0;
}
.b3d-play__step.is-active .b3d-play__num { background: var(--b3d-brand); }
.b3d-play__steplbl { flex: none; min-width: 2.4em; font-size: 13px; font-weight: 800; color: var(--b3d-brand-dark); }
.b3d-play__stepbody { flex: 1 1 auto; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; min-width: 0; }
.b3d-play__stepbody .b3d-play__chips { flex: 1 1 auto; }
.b3d-play__stepbody > button {
	flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; padding: 5px 10px; font: inherit; font-size: 14px; font-weight: 800; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 12px; cursor: pointer;
	touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
.b3d-play__stepbody > button .b3d-ico { color: var(--b3d-brand); }
.b3d-play__stepbody > button:hover:not(:disabled) { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-play__stepbody > button.is-on { background: var(--b3d-lime); border-color: #7f9e22; }
.b3d-play__stepbody > button.is-main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-play__stepbody > button.is-main .b3d-ico { color: #fff; }
/* Główny przycisk („Strzel”) zostaje granatowy pod kursorem / po stuknięciu (reguła :hover wyżej ma większą wagę). */
.b3d-play__stepbody > button.is-main:hover:not(:disabled),
.b3d-play__row > button.is-main:hover:not(:disabled) { color: #fff; background: var(--b3d-brand-dark); border-color: var(--b3d-brand-dark); }
.b3d-play__stepbody > button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-play__meter { position: relative; flex: 1 1 56px; min-width: 40px; height: 10px; border-radius: 999px; background: #e6e9f2; overflow: hidden; }
.b3d-play__meter i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; background: var(--b3d-lime); }
.b3d-play__meter.is-max i { background: #7f9e22; }
.b3d-play__pullv { min-width: 2.6em; text-align: right; font-size: 13px; font-weight: 800; color: var(--b3d-brand-dark); font-variant-numeric: tabular-nums; }
.b3d-play__step.is-nudge { animation: b3d-nudge 0.45s ease-in-out 2; }
@keyframes b3d-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .b3d-play__step.is-nudge { animation: none; } }

/* Jazda: pad jak pad — Naprzód u góry na środku, Wstecz pod nim, W lewo / W prawo po bokach, Stop w rogu. */
.b3d-drive__pad { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: ". fwd stop" "left back right"; }
.b3d-drive__pad [data-drive="1"] { grid-area: fwd; }
.b3d-drive__pad [data-drive="-1"] { grid-area: back; }
.b3d-drive__pad [data-drive="0"] { grid-area: stop; }
.b3d-drive__pad [data-steer="1"] { grid-area: left; }
.b3d-drive__pad [data-steer="-1"] { grid-area: right; }
.b3d-drive__pad .b3d-drive__steer { flex-direction: column; gap: 2px; }

/* Telefon: karta niższa; zwinięta = chip, zakładki i przyciski narzędzia (opis, wynik, „Od nowa” po „Więcej”). */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
	.b3d-result.is-tools { padding: 8px 10px; }
	.b3d-try { gap: 6px; margin-bottom: 6px; }
	.b3d-try__tabs { gap: 4px; }
	.b3d-try__tab { min-width: 54px; min-height: 46px; font-size: 11px; }
	.b3d-result.is-collapsed .b3d-result__lines,
	.b3d-result.is-collapsed:not(.is-drive) .b3d-result__acts,
	.b3d-result.is-collapsed .b3d-result__acts [data-res="again"],
	.b3d-result.is-collapsed .b3d-try__why,
	.b3d-result.is-collapsed .b3d-play__lbl,
	.b3d-result.is-collapsed .b3d-play__steplbl,
	.b3d-result.is-collapsed .b3d-drive__speed { display: none; }
	.b3d-result.is-collapsed .b3d-play { margin-top: 0; gap: 4px; }
	.b3d-result.is-collapsed .b3d-play__step { padding: 3px 4px; }
	.b3d-result.is-collapsed .b3d-drive__pad { margin-top: 6px; }
	.b3d-result.is-collapsed .b3d-drive__meter { margin-top: 0; }
}
@media (pointer: coarse) {
	.b3d-try__tab { min-height: 48px; }
	.b3d-try__more { min-height: 44px; }
	.b3d-play__stepbody > button { min-height: 48px; }
}

/* === v5 F2 UI === „Ładunki” w karcie „Testuj” (editor/play-ui.js + editor/payloads-ui.js, Ruling 121–128): żetony z masą,
   co wisi na budowli, odczyty wagi / żurawia, zagadka o masie; w strzale amunicja, przeciwwaga [−] [+] i tabela strzałów. */
.b3d-play__tokens { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; }
.b3d-tok {
	flex: 1 1 96px; min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 7px; align-items: center;
	min-height: 52px; padding: 5px 8px; text-align: left; font: inherit; color: var(--b3d-brand-dark); cursor: pointer;
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 12px; touch-action: manipulation;
}
.b3d-tok__sw {
	grid-row: 1 / 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-style: normal;
	font-size: 12px; font-weight: 800; color: #fff; background: var(--tok, #37474f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.b3d-tok__name { font-size: 13.5px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
/* Wciągarka, krok „Zawieś”: żetony pod podpisem kroku, na całą szerokość karty. */
.b3d-play__step[data-step="zawies"] { flex-wrap: wrap; }
.b3d-play__step[data-step="zawies"] .b3d-play__stepbody { flex: 1 0 100%; }
.b3d-tok__g { font-size: 12.5px; font-weight: 700; color: var(--b3d-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b3d-tok:hover { background: #f4f9e6; border-color: rgba(127, 158, 34, 0.6); }
.b3d-tok[aria-pressed="true"] { background: var(--b3d-lime); border-color: #7f9e22; }
.b3d-tok[aria-pressed="true"] .b3d-tok__g { color: var(--b3d-brand-dark); }
.b3d-tok:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-play__stepbody .b3d-play__tokens { flex: 1 1 auto; min-width: 0; }
.b3d-play__stepbody .b3d-play__chips--ammo { min-width: 0; }
.b3d-play__stepbody .b3d-play__chips--ammo .b3d-play__chip { min-width: 0; }
.b3d-play__tokens--hook .b3d-tok { flex: 1 1 84px; min-height: 46px; }
.b3d-play__how { flex: 1 0 100%; margin: 0; font-size: 13px; line-height: 1.35; color: var(--b3d-ink-soft); }
.b3d-play__on { flex: 1 0 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.b3d-play__on li {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 2px 10px;
	font-size: 13.5px; font-weight: 700; color: var(--b3d-brand-dark); background: #f4f6fb; border-radius: 10px;
}
.b3d-play__on small { font-weight: 600; color: var(--b3d-ink-soft); font-variant-numeric: tabular-nums; }
.b3d-play__x {
	flex: none; min-width: 40px; min-height: 40px; font: inherit; font-size: 20px; line-height: 1; color: var(--b3d-brand-dark);
	background: transparent; border: 0; border-radius: 8px; cursor: pointer;
}
.b3d-play__x:hover { background: #fdecea; color: #8e1c1c; }
.b3d-play__total { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin: 0; font-size: 13.5px; }
.b3d-play__link {
	min-height: 40px; padding: 4px 6px; font: inherit; font-size: 13px; font-weight: 800; color: var(--b3d-brand);
	background: none; border: 0; border-radius: 8px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.b3d-play__link:focus-visible, .b3d-play__x:focus-visible, .b3d-play__pm:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-play__readout { flex: 1 0 100%; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #f7fbec; border: 1px solid #d6e8a8; border-radius: 12px; }
.b3d-play__readout[hidden], .b3d-play__readout:empty { display: none; }
.b3d-play__readout p { margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--b3d-brand-dark); }
.b3d-ro__verdict { font-size: 15px !important; font-weight: 800; }
.b3d-ro__verdict[data-v="zle"] { color: #8e1c1c !important; }
.b3d-ro__sides { display: flex; flex-wrap: wrap; gap: 2px 14px; font-variant-numeric: tabular-nums; }
.b3d-ro__small { font-size: 12.5px !important; color: var(--b3d-ink-soft) !important; }
.b3d-ro__tilt { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.b3d-ro__bar { position: relative; flex: 1 1 auto; max-width: 120px; height: 8px; border-radius: 999px; background: #e6e9f2; overflow: hidden; }
.b3d-ro__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--b3d-lime); }
.b3d-ro__bar i.is-bad { background: #e57373; }
.b3d-quiz { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.b3d-quiz__q { flex: 1 0 100%; margin: 0; font-size: 14px; font-weight: 800; color: var(--b3d-brand-dark); }
.b3d-quiz__opts { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 0 100%; }
.b3d-quiz__opts .b3d-play__chip { flex: 1 1 auto; font-size: 13.5px; }
.b3d-quiz__res { flex: 1 0 100%; margin: 0; font-size: 13.5px; line-height: 1.35; color: var(--b3d-brand-dark); }
.b3d-quiz__res[data-ok="true"] { font-weight: 800; }
/* Strzał: amunicja (dwie linie: nazwa, masa), przeciwwaga [−] [+], tabela strzałów. */
.b3d-play__chips--ammo .b3d-play__chip { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 3px 4px; line-height: 1.1; font-size: 12.5px; min-height: 44px; }
.b3d-play__chip--ammo small { font-size: 11.5px; font-weight: 700; opacity: 0.85; font-variant-numeric: tabular-nums; }
.b3d-play__pm {
	flex: none; width: 44px; min-height: 44px; font: inherit; font-size: 22px; font-weight: 800; line-height: 1; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 12px; cursor: pointer; touch-action: manipulation;
}
.b3d-play__pm:disabled { opacity: 0.4; cursor: default; }
.b3d-play__cw { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 800; color: var(--b3d-brand-dark); font-variant-numeric: tabular-nums; }
.b3d-play__cw small { font-weight: 600; color: var(--b3d-ink-soft); }
.b3d-play__shots { flex: 1 0 100%; }
.b3d-play__shots:empty { display: none; }
.b3d-play__tablewrap { max-width: 100%; overflow-x: auto; }
.b3d-play__table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--b3d-brand-dark); }
.b3d-play__table caption { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--b3d-ink-soft); padding: 4px 0; }
.b3d-play__table th { text-align: left; font-weight: 800; padding: 3px 6px 3px 0; border-bottom: 2px solid var(--b3d-line); white-space: nowrap; }
.b3d-play__table td { padding: 3px 6px 3px 0; border-bottom: 1px solid var(--b3d-line); white-space: nowrap; }
.b3d-play__table small { color: var(--b3d-ink-soft); }
.b3d-play__table tr.is-best td { font-weight: 800; background: #f7fbec; }
.b3d-play__best { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--b3d-brand-dark); }
@media (max-width: 720px) {
	.b3d-tok { flex-basis: 30%; min-height: 48px; padding: 4px 6px; }
	.b3d-tok__name { font-size: 12.5px; }
	.b3d-tok__g { white-space: normal; font-size: 11.5px; line-height: 1.15; }
	.b3d-result.is-collapsed .b3d-play__how,
	.b3d-result.is-collapsed .b3d-quiz,
	.b3d-result.is-collapsed .b3d-play__on,
	.b3d-result.is-collapsed .b3d-play__total,
	.b3d-result.is-collapsed .b3d-play__shots,
	.b3d-result.is-collapsed .b3d-ro__small { display: none; }
}
@media (pointer: coarse) {
	.b3d-tok { min-height: 52px; }
	.b3d-play__x, .b3d-play__link { min-height: 44px; }
}


/* === v5 F3 === Lekcje (editor/lessons-ui.js, editor/worksheet.js; Ruling 105–112, plan interakcje-v5-plan.md §6, §7.2).
   Panel na komputerze z lewej pod paskiem (karta „Testuj” jest po prawej u dołu — nie nachodzą na siebie), paleta przesuwa się
   obok panelu. Na telefonie panel u góry pod paskiem, ZWINIĘTY do polecenia (+ przycisk kroku); rozwinięty — najwyżej 58 % ekranu. */
.b3d-lesson {
	/* top: pod paskiem narzędzi — lessons-ui.js ustawia --b3d-lesson-top z jego wysokości (pasek bywa w 2 rzędach). */
	/* Ruling 296: także pod linią limitu pod paskiem (--b3d-toolbar-bottom). */
	--b3d-lesson-y: max(var(--b3d-lesson-top, 76px), calc(var(--b3d-toolbar-bottom, 0px) + 4px));
	left: 14px; top: var(--b3d-lesson-y); z-index: 3; /* pod menu dziurki (5) i paskiem akcji (4) */
	width: 320px; max-height: calc(100% - var(--b3d-lesson-y) - 74px);
	display: flex; flex-direction: column;
	padding: 10px 12px 8px; overflow: hidden;
	border-color: rgba(164, 198, 58, 0.7); border-width: 2px;
}
.b3d-lesson[hidden], .b3d-lesson [hidden] { display: none !important; }
.b3d.is-lesson .b3d-palette { left: 346px; }
/* Ruling 130: w kroku z ciężarkami / strzałem paleta części jest schowana — zasłaniała budowlę, kółka miejsc i lot amunicji
   („Wróć do budowania” w panelu przywraca ją razem z budowaniem). */
.b3d.is-lesson-bench .b3d-palette { display: none !important; }
/* Wniosek: „Karta pracy” i „Zakończ lekcję” zawsze widoczne na dole panelu (dawniej pod zdaniami wniosku — trzeba było przewijać). */
.b3d-lesson__acts.is-sticky { position: sticky; bottom: -4px; z-index: 1; margin: 0; padding: 8px 0 6px; background: #fff; box-shadow: 0 -8px 10px -8px rgba(16, 22, 60, 0.18); }
.b3d-lesson__predicted { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13.5px; color: var(--b3d-ink-soft); }
.b3d-lesson__predicted b { color: var(--b3d-brand-dark); }
.b3d-lesson__how { margin: 4px 0 4px; font-size: 12.5px; line-height: 1.35; color: var(--b3d-ink-soft); }
.b3d-lesson__peekbench { margin: 4px 0 0; }
.b3d-lesson__peekbench .b3d-lesson__bench { margin: 0; }
.b3d-lesson__peekbench .b3d-lesson__lbl { margin: 2px 0 3px; }
.b3d-lesson__head { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.b3d-lesson__kicker {
	display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px;
	font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--b3d-brand-dark); background: var(--b3d-lime);
}
.b3d-lesson__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--b3d-brand-dark); outline: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b3d-lesson__kicker { flex: none; }
.b3d-lesson__x {
	flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
	font: inherit; font-size: 15px; font-weight: 800; color: var(--b3d-ink-soft);
	background: transparent; border: 1px solid transparent; border-radius: 9px; cursor: pointer;
}
.b3d-lesson__x:hover { color: var(--b3d-brand-dark); background: #f1f3fb; border-color: var(--b3d-line); }
.b3d-lesson__main { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.b3d-lesson__dots { list-style: none; display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; padding: 0; }
.b3d-lesson__dot button {
	display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%;
	font: inherit; font-size: 13px; font-weight: 800; color: var(--b3d-ink-soft); background: #eef0f6; border: 2px solid transparent; cursor: pointer;
}
.b3d-lesson__dot button:disabled { cursor: default; }
.b3d-lesson__dot.is-done button { color: #2f5a0c; background: #e3f0c6; }
.b3d-lesson__dot.is-current button { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-lesson__dot button:not(:disabled):hover { border-color: var(--b3d-lime); }
.b3d-lesson__body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; padding: 2px 2px 4px; }
.b3d-lesson__count { margin: 4px 0 2px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--b3d-ink-soft); }
.b3d-lesson__say { margin: 0 0 8px; font-size: 15px; line-height: 1.45; color: var(--b3d-ink); }
.b3d-lesson__peek {
	margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--b3d-ink);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.b3d-lesson__ok {
	display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 8px; padding: 8px 10px;
	border-radius: 12px; background: #eef6dc; color: #2f5a0c; font-size: 14px; line-height: 1.4;
}
.b3d-lesson__ok p { margin: 0; }
.b3d-lesson__ok span { color: var(--b3d-ink); }
.b3d-lesson__ok .b3d-ico { flex: none; margin-top: 1px; }
.b3d-lesson__ok.is-final { font-size: 16px; }
.b3d-lesson__predict { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #f4f6fc; border: 2px solid transparent; }
.b3d-lesson__predict.is-ask { border-color: var(--b3d-lime); background: #f7fbec; }
.b3d-lesson__predict p { margin: 0 0 6px; font-size: 14px; line-height: 1.4; }
.b3d-lesson__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.b3d-lesson :where(button:not(.b3d-lesson__x):not(.b3d-lesson__dot button)),
.b3d-lesson-list :where(button) {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 5px 11px;
	font: inherit; font-size: 13.5px; font-weight: 800; color: var(--b3d-brand-dark);
	background: #fff; border: 2px solid var(--b3d-line); border-radius: 11px; cursor: pointer; touch-action: manipulation;
}
.b3d-lesson button .b3d-ico { color: var(--b3d-brand); flex: none; }
.b3d-lesson :where(button:not(.b3d-lesson__x):not(.b3d-lesson__dot button):not(:disabled):not([aria-pressed="true"]):not(.is-main)):hover { background: #f1f3fb; border-color: rgba(0, 15, 153, 0.3); }
.b3d-lesson button:disabled { opacity: 0.55; cursor: default; }
.b3d-lesson button[aria-pressed="true"] { background: var(--b3d-lime); border-color: #7f9e22; opacity: 1; }
.b3d-lesson button.is-main,
.b3d-lesson-list button.is-main { color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand); }
.b3d-lesson button.is-main .b3d-ico { color: #fff; }
.b3d-lesson button.is-main:not(:disabled):hover { background: var(--b3d-brand-dark); border-color: var(--b3d-brand-dark); }
.b3d-lesson button.is-quiet { border-color: transparent; background: transparent; color: var(--b3d-ink-soft); }
.b3d-lesson button:focus-visible,
.b3d-lesson-list button:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-lesson__acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.b3d-lesson__acts--peek { margin: 6px 0 2px; }
.b3d-lesson__acts .is-main { flex: 1 1 auto; min-height: 42px; }
.b3d-lesson__more { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.b3d-lesson__note { margin: 6px 0 0; font-size: 12.5px; color: var(--b3d-ink-soft); }
.b3d-lesson__hints { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.b3d-lesson__hints li { display: flex; gap: 6px; padding: 6px 8px; border-radius: 10px; background: #fff7e0; font-size: 13.5px; line-height: 1.4; color: #5c4300; }
.b3d-lesson__hints .b3d-ico { flex: none; color: #b07d00; margin-top: 1px; }
.b3d-lesson__bench { margin: 0 0 6px; }
.b3d-lesson__lbl { margin: 4px 0 4px; font-size: 12px; font-weight: 800; color: var(--b3d-ink-soft); }
.b3d-lesson__lbl small { font-weight: 600; }
.b3d-lesson__tokens, .b3d-lesson__slots { display: flex; flex-wrap: wrap; gap: 5px; }
.b3d-lesson__tokens button { font-size: 12.5px; padding: 4px 9px; }
.b3d-lesson__slot { min-width: 64px; font-size: 13px; }
.b3d-lesson button.b3d-lesson__slot { flex-direction: column; gap: 0; min-height: 44px; padding: 3px 8px; line-height: 1.15; }
.b3d-lesson__slot small { font-size: 11px; font-weight: 600; color: var(--b3d-ink-soft); }
.b3d-lesson button.b3d-lesson__slot.is-full { background: #e9ecf8; border-color: #37474f; }
.b3d-lesson__slot.is-fixed {
	display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 3px 8px; line-height: 1.15;
	font-size: 13px; color: #fff; background: #37474f; border-radius: 11px;
}
.b3d-lesson__result, .b3d-lesson__status, .b3d-lesson__err { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 13.5px; line-height: 1.4; }
.b3d-lesson__result { font-weight: 700; color: var(--b3d-brand-dark); }
.b3d-lesson__err { color: var(--b3d-danger); font-weight: 700; }
.b3d-lesson__summary { margin: 0 0 8px; padding: 0 0 0 18px; font-size: 14.5px; line-height: 1.45; }
.b3d-lesson__summary li + li { margin-top: 4px; }
.b3d-lesson__real { margin: 0 0 8px; padding: 8px 10px; border-radius: 12px; background: #fff3e6; border: 1px solid #f7c99a; }
.b3d-lesson__real h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 14px; color: #8a4500; }
.b3d-lesson__real p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; }
.b3d-lesson__table { margin: 4px 0 8px; }
.b3d-lesson__table summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--b3d-brand-dark); margin-bottom: 4px; }
.b3d-lesson__tablewrap { overflow-x: auto; }
.b3d-lesson__table table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.b3d-lesson__table th { text-align: left; font-size: 11px; font-weight: 800; color: var(--b3d-ink-soft); padding: 3px 4px; border-bottom: 1px solid var(--b3d-line); }
.b3d-lesson__table td { padding: 3px 4px; border-bottom: 1px solid rgba(31, 35, 51, 0.06); }
.b3d-lesson__table tr.is-new td { background: #f7fbec; }
.b3d-lesson__table.is-wide table { font-size: 11.5px; }
.b3d-lesson__table.is-wide th, .b3d-lesson__table.is-wide td { padding: 3px 2px; }
.b3d-lesson__table.is-wide th { font-size: 10.5px; }
.b3d-lesson__empty { color: var(--b3d-ink-soft); font-style: italic; }
.b3d-lesson__teacher { margin: 4px 0 6px; padding-top: 6px; border-top: 1px dashed var(--b3d-line); }
.b3d-lesson__notes { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--b3d-ink); }
.b3d-lesson__notes p { margin: 0 0 5px; }
.b3d-lesson__foot { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 2px; padding-top: 6px; border-top: 1px solid var(--b3d-line); }
.b3d-lesson__foot button { white-space: nowrap; gap: 4px !important; min-height: 32px !important; padding: 3px 6px !important; font-size: 12px !important; border-color: transparent !important; color: var(--b3d-ink-soft) !important; }
/* Wskazanie (np. przycisk „Testuj” w kroku 1): limonkowa pulsująca obwódka przez kilka sekund. */
.b3d-lesson-point { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--b3d-lime) !important; animation: b3d-lesson-pulse 1s ease-in-out 3; }
@keyframes b3d-lesson-pulse { 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 10px rgba(164, 198, 58, 0.45); } }
@media (prefers-reduced-motion: reduce) { .b3d-lesson-point { animation: none; } }
/* Nazwy miejsc na ładunki w scenie (L1…P4) — tylko w krokach z ciężarkami. */
.b3d-lesson-tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.b3d-lesson-tags[hidden] { display: none; }
.b3d-lesson-tag {
	position: absolute; left: 0; top: 0; padding: 1px 6px; border-radius: 7px;
	font-size: 12px; font-weight: 800; color: var(--b3d-brand-dark); background: rgba(164, 198, 58, 0.92); box-shadow: 0 1px 3px rgba(16, 22, 60, 0.25);
}
.b3d-lesson-tag[hidden] { display: none; }
/* Ruling 144: nazwa po skosie od kółka — kreska do kółka */
.b3d-lesson-tags__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.b3d-lesson-tags__lines line { stroke: var(--b3d-brand-dark); stroke-width: 1.5; stroke-linecap: round; opacity: 0.75; }
/* Dla nauczyciela → Lekcje i karty pracy */
.b3d-lesson-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.b3d-lesson-list__items li { padding: 12px 14px; border: 1px solid var(--b3d-line); border-radius: 14px; }
.b3d-lesson-list__items h3 { margin: 0 0 4px; font-size: 17px; color: var(--b3d-brand-dark); }
.b3d-lesson-list__items p { margin: 0 0 4px; font-size: 14px; line-height: 1.4; }
.b3d-lesson-list__meta { color: var(--b3d-ink-soft); font-size: 13px !important; }
.b3d-lesson-list__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 6px; }

@media (min-width: 721px) and (max-width: 1023px) {
	.b3d-lesson { width: 290px; }
	.b3d.is-lesson .b3d-palette { left: 316px; }
}
/* Telefon: u góry pod paskiem, cała szerokość; zwinięty = tytuł + polecenie + przycisk kroku. */
@media (max-width: 720px) {
	.b3d-lesson { --b3d-lesson-y: max(var(--b3d-lesson-top, 62px), calc(var(--b3d-toolbar-bottom, 0px) + 2px)); left: 8px; right: 8px; top: var(--b3d-lesson-y); width: auto; max-height: 58%; padding: 8px 10px 6px; }
	.b3d.is-lesson .b3d-palette { left: 8px; }
	.b3d-lesson__title { font-size: 15px; }
	.b3d-lesson__say { font-size: 14px; }
	.b3d.is-lesson .b3d-parts { display: none; }
}
@media (pointer: coarse) {
	.b3d-lesson button:not(.b3d-lesson__x):not(.b3d-lesson__dot button) { min-height: 44px; }
	.b3d-lesson__foot button { min-height: 44px !important; }
	.b3d-lesson__x { width: 44px; height: 44px; }
	.b3d-lesson__dot button { width: 44px; height: 44px; }
}

/* Karta pracy (druk; #b3d-print — jak instrukcja). */
@media print {
	.b3d-ws { font-size: 11pt; line-height: 1.4; }
	.b3d-ws h2 { margin: 5mm 0 2mm; font-size: 12.5pt; color: #000F99; }
	.b3d-ws__who { display: flex; gap: 8mm; margin: 0 0 3mm; }
	.b3d-ws__who span { display: flex; flex: 1; gap: 2mm; }
	.b3d-ws__who i, .b3d-ws__line { display: block; flex: 1; min-height: 6mm; border-bottom: 0.3mm solid #888; }
	.b3d-ws__line { margin: 0 0 3mm; }
	.b3d-ws__goal { margin: 0 0 3mm; }
	.b3d-ws__img { display: block; max-width: 100%; max-height: 60mm; margin: 0 auto 3mm; object-fit: contain; }
	.b3d-ws__steps { margin: 0; padding-left: 6mm; }
	.b3d-ws__steps li { margin: 0 0 2.5mm; break-inside: avoid; }
	.b3d-ws__steps p { margin: 0; }
	.b3d-ws__predict { margin: 1.5mm 0 0; padding: 2mm 3mm; border: 0.3mm dashed #999; border-radius: 2mm; }
	.b3d-ws__predict .b3d-ws__line { display: inline-block; width: 60mm; min-height: 4mm; margin: 0; vertical-align: bottom; }
	.b3d-ws__opt { margin-right: 4mm; white-space: nowrap; }
	.b3d-ws__note { margin: 0 0 1.5mm; font-size: 9.5pt; color: #444; }
	.b3d-ws__table { width: 100%; border-collapse: collapse; font-size: 10.5pt; }
	.b3d-ws__table th, .b3d-ws__table td { border: 0.3mm solid #777; padding: 1.5mm 2mm; text-align: left; }
	.b3d-ws__table th { background: #eef1fb; }
	.b3d-ws__blank td { height: 8mm; }
	.b3d-ws__summary { margin: 0 0 2mm; padding-left: 6mm; }
	.b3d-ws__mine { margin: 2mm 0 1mm; font-weight: 700; }
	.b3d-ws__real { margin-top: 4mm; padding: 2mm 4mm; border: 0.4mm solid #f0a050; border-radius: 2mm; break-inside: avoid; }
	.b3d-ws__real h2 { margin-top: 1mm; color: #8a4500; }
}
/* === koniec v5 F3 === */

/* ---- Pomoc (2026-10-24): krótsze karty — ikona obok tytułu, zwarta lista skrótów; całość mieści się w 800 px ---- */
@media (min-width: 761px) {
	.b3d-intro__card:not(.b3d-intro__card--check) { display: grid; grid-template-columns: 40px 1fr; column-gap: 10px; align-items: center; align-content: start; }
	.b3d-intro__card:not(.b3d-intro__card--check) svg { width: 40px; height: 40px; margin: 0; }
	.b3d-intro__card:not(.b3d-intro__card--check) h3 { margin: 0; }
	.b3d-intro__card:not(.b3d-intro__card--check) p { grid-column: 1 / -1; margin-top: 8px; }
	.b3d-keys { padding: 10px 14px; }
	.b3d-keys__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 16px; }
	.b3d-keys__list > div { flex-direction: column; gap: 2px; }
	.b3d-keys__list dt { min-width: 0; }
}

/* Audyty A1/A2: czytelne wskazówki, anulowanie i kadr telefonu. */
.b3d-try__almost p { margin: 6px 0 0; font-size: 13px; line-height: 1.35; }
.b3d-example-guide { position: absolute; z-index: 7; left: 220px; bottom: 64px; max-width: min(480px, calc(100% - 460px)); padding: 8px 12px; font-size: 13px; line-height: 1.35; margin: 0; }
.b3d-example-guide[hidden], .b3d.is-physics .b3d-example-guide, .b3d.is-lesson .b3d-example-guide,
.b3d:has(#b3d-float:not([hidden])) .b3d-example-guide { display: none; }
.b3d-fit-phone { display: none; }
.b3d.is-lesson #b3d-feedback-card, .b3d.is-lesson #b3d-break,
.b3d.is-physics [data-act="restore"] { display: none; }
@media (pointer: coarse) {
  .b3d-float[data-kind="lina"] { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: auto; bottom: calc(var(--b3d-palette-covered, 160px) + 6px); transform: none !important; width: auto; max-width: none; flex-wrap: nowrap; gap: 4px; padding: 5px; }
  .b3d-float[data-kind="lina"] .b3d-float__info { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; font-size: 12px; }
  .b3d-float[data-kind="lina"] button { flex: none; min-height: 44px; padding: 5px 7px; font-size: 12px; }
  .b3d-float[data-kind="lina"] .b3d-sizes { gap: 3px; flex: none; }
  .b3d:has(.b3d-float[data-kind="lina"]:not([hidden])) .b3d-parts { display: none; }
  .b3d-pal[data-type="gumka"] svg { color: var(--b3d-brand); }
}
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-palette__cancel { position: sticky; left: 0; top: 0; z-index: 2; order: -1; align-self: stretch; margin: 0 5px 0 0; background: #fff; min-width: 64px; }
  .b3d-hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .b3d-hint.is-expired, .b3d.is-lesson .b3d-hint, .b3d.is-lesson-no-build .b3d-palette { display: none; }
  .b3d-fit-phone { display: inline-flex; align-items: center; gap: 6px; right: max(8px, env(safe-area-inset-right)); bottom: calc(var(--b3d-palette-covered, 160px) + 54px); z-index: 7; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 12px; cursor: pointer; }
  .b3d-fit-phone:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
  .b3d.is-physics .b3d-fit-phone, .b3d.is-lesson .b3d-fit-phone, .b3d:has(#b3d-float:not([hidden])) .b3d-fit-phone { display: none; }
  .b3d-example-guide { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: var(--b3d-toolbar-bottom, 76px); bottom: auto; max-width: none; max-height: 25vh; overflow-y: auto; padding: 5px 8px; font-size: 12px; }
}
@media (max-height: 500px) and (pointer: coarse) {
  .b3d-toolbar { flex-wrap: nowrap; }
  .b3d-palette { bottom: 44px; }
  .b3d-palette__colors { grid-template-columns: repeat(6, 28px); gap: 3px; }
  .b3d-palette__colors .b3d-swatch { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
  .b3d-parts { top: var(--b3d-toolbar-bottom, 76px); bottom: auto; max-height: 28vh; }
  .b3d.is-physics .b3d-palette { display: none; }
  .b3d-result.is-try { bottom: 12px; }
  .b3d-example-guide { max-height: 20vh; }
}

.b3d-rope-help { display: block; }
.b3d-rope-help p, .b3d-rope-help ul { margin: 6px 0; font-size: 13px; line-height: 1.4; }
.b3d-rope-help ul { padding-left: 20px; }
.b3d-play__pull-note { flex: 1 0 100%; margin: 4px 0; font-size: 13px; line-height: 1.3; }

.b3d-rope-help { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--b3d-line); border-radius: 12px; }

.b3d-play__hook-load { flex: 1 0 100%; margin: 4px 0; font-size: 13px; line-height: 1.3; }

/* Tryb projektu: krótki znaczek mieści się w jednym rzędzie także na telefonie. */
.b3d-design-badge { flex: 0 0 auto; white-space: nowrap; font-size: 11px; font-weight: 800; color: #000f99; border-bottom: 2px solid #a4c63a; }
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-design-badge { font-size: 10px; }
}

/* Materiały SCUBE: każda strona ma własną markę i numer (bez zawodnych liczników @page). */
@media print {
  .b3d-print { font-family: 'Nunito', system-ui, sans-serif; }
  .b3d-print__page--brand { display: flex; flex-direction: column; box-sizing: border-box; height: 272mm; break-inside: avoid; }
  .b3d-print__page--brand .b3d-print__head { flex: 0 0 auto; align-items: center; gap: 5mm; padding-bottom: 4mm; margin-bottom: 5mm; border-bottom: 0.7mm solid #a4c63a; }
  .b3d-print__brand { display: flex; align-items: center; gap: 3mm; color: #000f99; flex: 0 0 auto; }
  .b3d-print__brand svg { width: 11mm; height: 12mm; }
  .b3d-print__wordmark { font-size: 15pt; font-weight: 800; letter-spacing: 0.2pt; }
  .b3d-print__meta { min-width: 0; display: flex; flex-direction: column; gap: 1mm; text-align: right; font-size: 9pt; }
  .b3d-print__project { font-weight: 700; overflow-wrap: anywhere; }
  .b3d-print__meta time { color: #444; }
  .b3d-print__content { flex: 1 1 auto; min-height: 0; }
  .b3d-print__content h1 { margin: 0 0 5mm; color: #000f99; font-size: 19pt; line-height: 1.2; }
  .b3d-print__content h2 { color: #000f99; }
  .b3d-print__foot { flex: 0 0 auto; display: flex; justify-content: space-between; gap: 5mm; border-top: 0.3mm solid #a4c63a; padding-top: 3mm; margin-top: 5mm; color: #333; font-size: 9pt; }
  .b3d-print__summary { border: 0.3mm solid #d5d9e7; border-left: 1mm solid #a4c63a; padding: 3mm 4mm; margin-bottom: 5mm; }
  .b3d-print__summary dl { display: flex; gap: 12mm; margin: 0; }
  .b3d-print__summary dt { font-size: 9pt; color: #444; }
  .b3d-print__summary dd { font-size: 21pt; font-weight: 800; color: #000f99; margin: 0; }
  .b3d-print__summary p { margin: 2mm 0 0; font-size: 9pt; }
  .b3d-print__parts-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 2mm 6mm; list-style: none; padding: 0; margin: 0 0 3mm; font-size: 10pt; }
  .b3d-print__page--brand .b3d-print__hero { height: 105mm; border: 0; margin: 5mm 0; }
  .b3d-print__page--brand .b3d-print__hero.is-bom { height: 70mm; }
  .b3d-print__page--brand .b3d-print__steps { gap: 6mm; grid-template-rows: repeat(2, 100mm); }
  .b3d-print__page--brand .b3d-print__step { min-width: 0; break-inside: avoid; page-break-inside: avoid; }
  .b3d-print__page--brand .b3d-print__step img { height: 72mm; object-fit: contain; border: 0.25mm solid #d5d9e7; border-radius: 1mm; }
  .b3d-print__step p { display: flex; align-items: flex-start; gap: 2.5mm; }
  .b3d-print__number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 8mm; height: 8mm; border-radius: 50%; background: #000f99; color: #fff; font-size: 11pt; line-height: 1; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .b3d-print__page--brand .b3d-bom { width: 100%; }
  .b3d-print__page--brand .b3d-bom tr { break-inside: avoid; }
  .b3d-print__page--brand .b3d-bom th { background: none; color: #000f99; }
}

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-toolbar:has([data-design-badge]:not([hidden])) { column-gap: 4px; }
}
@media (max-width: 480px) {
  .b3d-toolbar:has([data-design-badge]:not([hidden])) .b3d-brand { display: none; }
}

/* Contest strip sits below the existing toolbar, preserving its phone layout. */
.b3d-contest-bar{position:absolute;top:var(--b3d-toolbar-bottom,76px);left:12px;right:12px;z-index:8;display:flex;align-items:center;gap:8px;padding:4px 8px;background:#fff;border:1px solid var(--b3d-line);font-size:14px}.b3d-contest-bar[hidden]{display:none}.b3d-contest-bar [data-contest-badge]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;color:var(--b3d-brand)}.b3d-contest-bar button{flex:none;min-height:44px;padding:8px 12px;border:1px solid var(--b3d-brand);border-radius:24px;background:white;color:var(--b3d-brand);font:800 14px Nunito,system-ui,sans-serif;cursor:pointer}.b3d-contest-bar [data-contest-send]{background:var(--b3d-brand);color:white}.b3d-contest-bar button:disabled{opacity:.55;cursor:default}.b3d-contest-dialog{max-height:calc(100dvh - 24px);overflow:auto}.b3d-contest-dialog h2{font-size:22px;color:var(--b3d-brand);margin:0}.b3d-contest-dialog [data-contest-snapshot]{width:100%;height:auto;max-height:220px;object-fit:contain}.b3d-contest-fields{display:grid;gap:12px}.b3d-contest-fields label{display:grid;gap:4px;font-weight:700}.b3d-contest-fields input,.b3d-contest-fields select{width:100%;min-height:44px;font:inherit;padding:8px;border:1px solid #8b90a7;border-radius:6px}.b3d-contest-fields p{font-size:13px;margin:-8px 0 0}.b3d-contest-consent{display:flex;align-items:flex-start;gap:10px;margin:16px 0;line-height:1.4}.b3d-contest-consent input{flex:none;width:20px;height:20px;margin:2px}.b3d-contest-consent span{min-width:0}.b3d-contest-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.b3d-contest-dialog [data-contest-form-message]{white-space:pre-line;font-weight:700;color:var(--b3d-brand)}.b3d-contest-dialog [data-contest-rules-text]{white-space:pre-line}.b3d-contest-dialog [data-contest-rule-examples]{display:flex;flex-wrap:wrap;gap:8px}.b3d-contest-dialog [data-contest-rule-examples] img{width:100px;height:75px;object-fit:cover}.b3d-contest-bar button:focus-visible{outline:3px solid #1d174b;box-shadow:0 0 0 6px var(--b3d-lime);outline-offset:2px}@media(max-width:720px){.b3d-contest-bar{left:8px;right:8px;gap:4px;font-size:12px;padding:2px 4px}.b3d-contest-bar button{font-size:12px;padding:6px 8px}.b3d-contest-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.b3d-contest-dialog [data-contest-snapshot]{max-height:150px}}

/* Batch UX: cele dotykowe, czytelne ustawienia i wiadomości bez nakładania paneli. */
.b3d-view-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px; font-size: 14px; }
.b3d-view-label select { min-height: 44px; max-width: 180px; font: inherit; color: var(--b3d-ink); background: #fff; border: 1px solid var(--b3d-line); border-radius: 8px; }
[data-view="note"] { display: block; max-width: 260px; padding: 4px 8px; line-height: 1.4; }
.b3d-image-options { display: grid; gap: 8px; }
.b3d-image-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.b3d-image-options input { width: 20px; height: 20px; }
.b3d.is-design .b3d-example-guide { display: none; }
.b3d-brand__sub { color: #4b5270; }
.b3d-palette-more { position: absolute; z-index: 7; text-align: center; padding: 2px 0; color: var(--b3d-brand); background: #fff; font-size: 12px; line-height: 16px; font-weight: 800; pointer-events: none; }
.b3d-palette-more[hidden] { display: none; }
@media (min-width: 721px) and (max-width: 1100px) and (min-height: 501px) {
  .b3d-toolbar { gap: 6px; flex-wrap: nowrap; }
  .b3d-tools { gap: 4px; }
  /* Ruling 296: Pomoc zostaje na pasku (dawniej znikała przy ≤ 1100 px) — w razie ciasnoty sama ikona (is-fit-1). */
  .b3d-menubar summary { padding-left: 8px; padding-right: 8px; }
  .b3d-tools--end { flex-shrink: 0; }
}
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-hint { white-space: normal; text-overflow: clip; line-height: 1.35; max-height: 2.7em; padding-top: 4px; padding-bottom: 4px; box-sizing: content-box; }
  .b3d.has-palette-column .b3d-fit-phone { top: calc(var(--b3d-toolbar-bottom, 76px) + 8px); bottom: auto; }
}
@media (pointer: coarse) {
  .b3d-swatch, .b3d-palette__colors .b3d-swatch, .b3d-partcolor__swatches .b3d-swatch { min-width: 44px; min-height: 44px; width: 44px; height: 44px; }
  .b3d-palette__colors { grid-template-columns: repeat(6, 44px); }
  .b3d-partcolor__swatches { grid-template-columns: repeat(6, minmax(44px, 1fr)); }
  .b3d-parts > summary, .b3d-lib__filter, .b3d-lib__concept, .b3d-dialog__x, .b3d-size, .b3d-partcolor__default { min-width: 44px; min-height: 44px; }
  .b3d-dialog button, .b3d-result button { min-height: 44px; }
}

@media print {
  .b3d-print__page--brand .b3d-print__step img { height: 80mm; }
  .b3d-print__page--brand .b3d-print__steps.is-short { grid-template-rows: 205mm; }
  .b3d-print__page--brand .b3d-print__steps.is-short .b3d-print__step img { height: 170mm; }
  .b3d-print__steps.is-short > :only-child { grid-column: 1 / -1; }
}

@media (pointer: coarse) {
  .b3d-parts summary, .b3d-dialog.b3d-lib .b3d-lib__chip, .b3d-lib__tabs [role="tab"], .b3d-play__x { min-height: 44px; min-width: 44px; }
}

@media (min-width: 721px) and (max-width: 1100px) and (min-height: 501px) {
  .b3d-menubar__items { flex-wrap: nowrap; }
  /* Ruling 296: ikony menu chowa dopiero is-fit-2 (gdy naprawdę brakuje miejsca), muzyki nie ma już na pasku. */
}

@media (pointer: coarse) {
  .b3d-menu__swatches, .b3d-partcolor__swatches { grid-template-columns: repeat(5, minmax(44px, 1fr)); }
  .b3d-dialog .b3d-dialog__x { min-height: 44px; min-width: 44px; }
}
@media (pointer: coarse) and (min-width: 721px) and (min-height: 501px) {
  .b3d-palette__colors { grid-template-columns: repeat(3, 44px); }
}

@media (pointer: coarse) and (max-width: 720px) and (min-height: 501px) {
  .b3d-palette__colors { grid-template-columns: repeat(4, 44px); }
}
.b3d.is-lesson-bench .b3d-palette-more, .b3d.is-lesson-no-build .b3d-palette-more { display: none; }

/* Internal contest demonstration; stays in the toolbar flow at phone widths. */
.b3d-contest-demo-ribbon{flex-basis:100%;color:#000f99;font-size:12px;text-align:center;text-wrap:balance}

.b3d-contest-bar:has([data-contest-demo-ribbon]){flex-wrap:wrap}

/* Local texture attribution, same dialog and focus rules as the editor. */
.b3d-credits { width: min(560px, calc(100vw - 24px)); }
.b3d-credits .b3d-dialog__head { position: sticky; top: 0; background: #fff; padding-bottom: 10px; }
.b3d-credits li { margin-bottom: 12px; overflow-wrap: anywhere; }
.b3d-credits a { color: var(--b3d-brand); }


.b3d-example-guide summary { display: none; }
.b3d-example-guide p { margin: 0; }

/* Telefon: jedna linia narzędzi, jedna linia części; kolory dopiero po stuknięciu. */
.b3d-palette__color-button, .b3d-palette__color-back { display: none; }
.b3d-design-badge { padding: 2px 5px; font-family: inherit; background: transparent; border: 0; border-bottom: 2px solid var(--b3d-lime); cursor: pointer; }
.b3d-design-badge:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-contest-menu { display: grid; gap: 4px; padding: 4px 8px 8px; border-bottom: 1px solid var(--b3d-line); }
.b3d-contest-menu[hidden], [data-contest-bar], [data-contest-send][hidden] { display: none !important; }
.b3d-contest-menu strong { font-size: 13px; color: var(--b3d-brand); overflow-wrap: anywhere; }
.b3d-contest-demo-ribbon { font-size: 11px; line-height: 20px; white-space: nowrap; text-align: left; }
.b3d-tools .b3d-contest-send { min-height: 44px; padding: 6px 12px; font: 800 14px 'Nunito', system-ui, sans-serif; color: var(--b3d-brand-dark); background: var(--b3d-lime); border: 1px solid #7f9e22; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.b3d-contest-send:disabled { opacity: .55; cursor: default; }
.b3d-contest-send:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: 2px; }
.b3d-contest-send__short { display: none; }
.b3d.is-contest [data-act="examples"], .b3d.is-contest [data-act="lessons-teacher"], .b3d.is-contest [data-act="design"],
.b3d.is-contest [data-intro="lessons"], .b3d.is-contest [data-intro="examples"],
.b3d.is-contest #b3d-first-ex, .b3d.is-contest [data-try], .b3d.is-contest #b3d-project-limit,
.b3d.is-contest #b3d-lesson, .b3d.is-contest .b3d-example-guide { display: none !important; }

/* Wprowadzenie konkursowe: trzy kroki i jeden obraz inspiracji, bez wczytywania cudzej pracy. */
.b3d-contest-intro { width: min(700px, calc(100vw - 24px)); padding: 20px; }
.b3d-contest-intro .b3d-dialog__head { margin-bottom: 10px; }
.b3d-contest-intro .b3d-dialog__body { padding: 0; }
.b3d-contest-intro__theme { font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--b3d-brand-dark); margin: 0 0 12px; text-wrap: balance; }
.b3d-contest-intro__inspiration { float: right; margin: 0 0 12px 16px; }
.b3d-contest-intro__inspiration[hidden] { display: none; }
.b3d-contest-intro__inspiration figcaption { font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--b3d-ink-soft); }
.b3d-contest-intro [data-contest-rule-examples] { flex-wrap: nowrap; }
.b3d-contest-intro [data-contest-rule-examples] img { width: 112px; height: 84px; border-radius: 8px; object-fit: contain; background: #f4f6fb; }
.b3d-contest-intro__steps { list-style: none; counter-reset: contest-step; display: grid; gap: 12px; margin: 0; padding: 0; }
.b3d-contest-intro__steps li { position: relative; padding-left: 38px; counter-increment: contest-step; }
.b3d-contest-intro__steps li::before { content: counter(contest-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--b3d-lime); color: var(--b3d-brand-dark); font-weight: 800; }
.b3d-contest-intro h3 { margin: 0 0 3px; font-size: 17px; color: var(--b3d-brand-dark); }
.b3d-contest-intro__steps p { margin: 0; font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.b3d-contest-intro [data-contest-until] { font-weight: 700; margin-top: 3px; }
.b3d-contest-intro__prize { clear: both; margin: 12px 0 4px; padding: 8px 10px; border-radius: 8px; background: #f4f9e6; font-weight: 800; }
.b3d-contest-intro__prize:empty { display: none; }
.b3d-contest-intro__rules { margin: 0; }
.b3d-contest-intro__rules summary { min-height: 44px; display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; font-weight: 800; }
.b3d-contest-intro__rules summary::before { content: '▸'; }
.b3d-contest-intro__rules[open] summary::before { content: '▾'; }
.b3d-contest-intro__rules p { margin: 0 0 8px; font-size: 13px; line-height: 1.35; }
.b3d-contest-intro [data-contest-rules-url] { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--b3d-brand); }
.b3d-contest-intro [data-contest-rules-url][hidden] { display: none; }
.b3d-contest-intro .b3d-dialog__acts { margin-top: 8px; }

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-toolbar, .b3d-toolbar:has(.b3d-project-limit:not([hidden])) { flex-wrap: nowrap; gap: 4px; padding: 6px; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); }
  .b3d-tools--history { gap: 4px; flex: none; }
  .b3d-toolbar .b3d-ibtn { width: 44px; height: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .b3d-toolbar .b3d-tools--aux { display: flex; order: 1; flex: none; } /* Na pasku zostaje tylko ikona dźwięku. */
  .b3d-toolbar .b3d-design-badge { order: 0; min-height: 44px; font-size: 11px; }
  .b3d-toolbar .b3d-menubar { flex: none; }
  .b3d-phys__toggle, .b3d-contest-send { order: 2; margin-left: auto; flex: none; }
  .b3d-project-limit { position: absolute; top: calc(100% + 6px); left: 0; right: 0; width: auto; padding: 5px 8px; font-size: 12px; background: #fff; border: 1px solid var(--b3d-line); }
  .b3d-contest-send__wide { display: none; }
  .b3d-contest-send__short { display: inline; }
  .b3d-palette { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: calc(58px + env(safe-area-inset-bottom)); padding: 4px; gap: 4px; min-height: 70px; max-height: 92px; box-sizing: border-box; }
  .b3d-palette__items { display: flex; flex: none; grid-template-rows: none; gap: 4px; }
  .b3d-pal { width: 68px; height: 60px; min-height: 60px; padding: 2px; }
  .b3d-palette__colorbox { display: none; }
  .b3d-palette__color-button, .b3d-palette__color-back { display: inline-flex; flex: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 60px; min-height: 44px; padding: 4px; font: 800 12px 'Nunito', system-ui, sans-serif; color: var(--b3d-brand-dark); background: #fff; border: 1px solid var(--b3d-line); border-radius: 10px; cursor: pointer; }
  .b3d-palette__color-button { position: sticky; left: 0; z-index: 1; align-self: stretch; }
  .b3d-palette__color-button i { width: 24px; height: 24px; border-radius: 6px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
  .b3d-palette__color-button:focus-visible, .b3d-palette__color-back:focus-visible { outline: 3px solid #1d174b; box-shadow: 0 0 0 6px var(--b3d-lime); outline-offset: -3px; }
  .b3d-palette.is-colors { padding-top: 0; padding-bottom: 0; min-height: 90px; overflow: hidden; mask-image: none; -webkit-mask-image: none; }
  .b3d-palette.is-colors .b3d-palette__colorbox { display: flex; flex: 1 1 auto; flex-direction: row; align-items: center; gap: 4px; padding: 0; border: 0; }
  .b3d-palette.is-colors .b3d-palette__items, .b3d-palette.is-colors .b3d-palette__cancel, .b3d-palette.is-colors .b3d-palette__color-button { display: none; }
  .b3d-palette__colors { grid-template-columns: repeat(6, 44px); gap: 0 4px; margin: 0; }
  .b3d-palette__colors .b3d-swatch { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .b3d-palette__color-back { margin-left: auto; }
  .b3d-palette__cancel { left: 0; margin-right: 0; min-width: 60px; }
  .b3d-palette:has(.b3d-palette__cancel:not([hidden])) .b3d-palette__color-button { position: static; }
  .b3d-fit-phone, .b3d.has-palette-column .b3d-fit-phone { top: auto; bottom: calc(var(--b3d-palette-covered, 122px) + 6px); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .b3d-parts { top: auto; bottom: calc(var(--b3d-palette-covered, 122px) + 6px); right: calc(max(8px, env(safe-area-inset-right)) + 50px); padding: 0 8px; max-width: calc(100% - 74px); max-height: 30vh; }
  .b3d-parts summary { min-height: 44px; gap: 5px; margin: 0; white-space: nowrap; }
  .b3d-parts__title, .b3d-parts__summary-weight { display: none; }
  .b3d-parts__count { margin: 0; }
  .b3d-parts:has(details[open]) { padding: 0 8px 8px; }
  .b3d-parts details[open] .b3d-parts__title { display: inline; }
  .b3d-parts__warn { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .b3d-parts:has(.b3d-parts__warn) summary::before { content: '!'; color: var(--b3d-danger); font-weight: 800; }
  .b3d-parts:has(details[open]) .b3d-parts__warn { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .b3d.is-physics .b3d-parts, .b3d:has(#b3d-float:not([hidden])) .b3d-parts { display: none; }
  .b3d-hint { bottom: calc(10px + env(safe-area-inset-bottom)); opacity: 1; transition: opacity 180ms ease-out; box-sizing: border-box; max-width: calc(100% - 16px); max-height: calc(2.7em + 8px); }
  .b3d-hint.is-expired { display: block; opacity: 0; }
  .b3d-menu { top: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); width: auto; max-height: 55vh; box-sizing: border-box; padding: 0 8px 8px; transform: none !important; overscroll-behavior: contain; scroll-padding-top: 52px; }
  .b3d-menu__head { position: sticky; top: 0; z-index: 2; align-items: center; padding: 4px 0; margin: 0 0 4px; background: #fff; border-bottom: 1px solid var(--b3d-line); }
  .b3d-menu__head .b3d-menu__title { margin: 0; }
  .b3d-menu__close { min-height: 44px; padding: 4px 8px; }
  .b3d-menu__parts { gap: 4px; }
  .b3d-menu__parts .b3d-part { padding: 2px 4px; min-height: 58px; gap: 0; }
  .b3d-menu__parts .b3d-part img { width: 32px; height: 32px; }
  .b3d:has(#b3d-menu:not([hidden])) .b3d-parts, .b3d:has(#b3d-menu:not([hidden])) .b3d-fit-phone,
  .b3d:has(#b3d-menu:not([hidden])) .b3d-example-guide { display: none; }
  .b3d-example-guide { padding: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; max-height: 25vh; }
  .b3d-example-guide summary { display: flex; align-items: center; width: max-content; max-width: 100%; min-height: 44px; padding: 0 10px; box-sizing: border-box; cursor: pointer; font-weight: 800; background: #fff; border: 1px solid var(--b3d-line); border-radius: 12px; }
  .b3d-example-guide p { margin: 0; padding: 8px 10px; background: #fff; border-radius: 8px; }
  .b3d-lesson { left: 8px; right: 8px; width: auto; max-height: 55%; padding: 4px 8px; }
  .b3d-lesson__peek { -webkit-line-clamp: 2; margin-top: 2px; font-size: 13px; }
  .b3d-result.is-tools { padding: 6px 8px; }
  .b3d-result.is-collapsed .b3d-try__tabs { flex-wrap: nowrap; overflow-x: auto; }
  .b3d-result.is-collapsed .b3d-try__tab { flex: 0 0 58px; min-height: 44px; }
  .b3d-tok { min-height: 44px; padding: 3px 5px; }
  .b3d-steps { padding: 6px 8px; max-height: 45vh; overflow: auto; }
  .b3d-steps__label { min-height: 0; margin: 4px 0; font-size: 13px; }
  .b3d-steps__head { gap: 4px; }
  .b3d-steps__head button { padding: 4px 8px; }
  .b3d-warn { padding: 6px 8px; max-width: calc(100% - 16px); }
  .b3d-warn__text { font-size: 13px; }
  .b3d-warn__acts { margin-top: 4px; }
  .b3d-fbcard { top: var(--b3d-toolbar-bottom, 72px); left: 8px; right: 8px; bottom: auto; width: auto; max-width: none; padding: 6px 8px; transform: none; font-size: 12px; }
  .b3d-fbcard__text { margin-bottom: 4px; line-height: 1.3; }
  .b3d-fbcard__acts { gap: 4px; }
  .b3d-fbcard button { font-size: 12px; padding: 4px 8px; }
  .b3d-contest-intro { padding: 14px; max-height: calc(100dvh - 16px); }
  .b3d-contest-intro h2 { font-size: 19px; line-height: 1.2; text-wrap: balance; }
  .b3d-contest-intro__theme { font-size: 22px; margin-bottom: 10px; }
  .b3d-contest-intro__steps { gap: 10px; }
  .b3d-contest-intro__steps li { padding-left: 34px; }
  .b3d-contest-intro h3 { font-size: 16px; }
  .b3d-contest-intro__steps p { font-size: 13px; line-height: 1.35; }
  .b3d-contest-intro__inspiration { float: none; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
  .b3d-contest-intro [data-contest-rule-examples] img { width: 80px; height: 56px; }
  .b3d-contest-intro__prize { font-size: 13px; margin-top: 10px; padding: 6px 8px; }
}
@media (max-width: 360px) {
  .b3d-palette.is-colors .b3d-palette__colorbox { display: block; position: relative; }
  .b3d-palette__colors { grid-template-columns: repeat(6, 44px); gap: 0; }
  .b3d-palette__color-back { position: absolute; right: 0; bottom: 0; }
  .b3d-palette__color-back { min-width: 44px; padding: 0; font-size: 11px; }
  .b3d-toolbar .b3d-brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b3d-hint { transition: none; }
}



@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-result .b3d-play__tokens { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0; }
  .b3d-result .b3d-play__tokens .b3d-tok { flex: 0 0 106px; min-height: 44px; }
  .b3d-project-limit { line-height: 1.2; padding: 3px 6px; }
}

@media (max-width: 380px) { .b3d-toolbar:has([data-design-badge]:not([hidden])) .b3d-tools--aux { display: none; } }



/* Szeroki telefon mieści wszystkie kolory w jednym rzędzie. */
@media (min-width: 640px) and (max-width: 720px), (min-width: 640px) and (max-height: 500px) and (pointer: coarse) {
  .b3d-palette.is-colors { min-height: 54px; padding: 4px; }
  .b3d-palette__colors { grid-template-columns: repeat(11, 44px); }
}

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d.is-lesson .b3d-palette { left: max(8px, env(safe-area-inset-left)); }
}

/* Zapis ma pierwszeństwo przed zaproszeniami; telefon potrzebuje krótkiego przypomnienia. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-unsaved { top: var(--b3d-toolbar-bottom, 72px); left: 8px; right: 8px; width: auto; max-width: none; transform: none; padding: 4px 6px; gap: 4px; box-sizing: border-box; }
  .b3d-unsaved button { font-size: 12px; padding: 4px 10px; }
  .b3d-unsaved .b3d-unsaved__x { width: 44px; padding: 0; }
  .b3d-banner { top: var(--b3d-toolbar-bottom, 72px); bottom: auto; left: 8px; right: 8px; width: auto; max-width: none; transform: none; flex-wrap: nowrap; padding: 4px 6px; gap: 6px; font-size: 12px; box-sizing: border-box; }
  .b3d-banner__text { flex: 1; min-width: 0; }
  .b3d-banner button { padding: 4px 8px; font-size: 12px; }
  .b3d:has(#b3d-banner:not([hidden])) #b3d-feedback-card, .b3d:has(#b3d-banner:not([hidden])) #b3d-break { display: none; }
}

@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d:has(#b3d-menu:not([hidden])) .b3d-hint { bottom: calc(var(--b3d-menu-covered, 55vh) + 6px); }
}

/* Centrowanie bez procentowego przesunięcia: błysk nie zapamiętuje szerokości poprzedniego tekstu. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  .b3d-hint { left: 8px; right: 8px; margin-left: auto; margin-right: auto; max-width: calc(100% - 28px); transform: none; }
  .b3d-hint.is-flash { animation-name: b3d-flash-phone; }
}
@keyframes b3d-flash-phone {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) { .b3d-hint.is-flash { animation: none; } }

/* Two-color keyboard focus also covers links, summaries and contest fields. */
.b3d :focus-visible, .b3d-dialog :focus-visible { outline: 3px solid #1d174b; outline-offset: 2px; box-shadow: 0 0 0 6px var(--b3d-lime, #a4c63a); }

/* Retry stays visible and interactive until the next normal hint replaces it. */
.b3d .b3d-hint:has(a) { pointer-events: auto; opacity: 1; max-height: none; overflow: visible; }
.b3d-hint a { pointer-events: auto; color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Uwagi #528–529: key hints only with a mouse/keyboard, stable construction help. */
.b3d-drop__menu kbd, .b3d-key-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .b3d-key-hint { display: inline; font-size: 11px; color: #5c6168; margin-left: auto; white-space: nowrap; }
  .b3d-drop__menu kbd { display: inline; pointer-events: none; }
}
.b3d .b3d-warnings-off { position: absolute; right: 16px; bottom: 80px; z-index: 11; cursor: pointer; font-family: inherit; border-radius: 6px; min-height: 32px; padding: 4px 7px; font-size: 10px; color: #545b64; background: #f2f3f5; border: 1px solid #c8cdd3; }
.b3d-construction-notices { position: absolute; right: 12px; top: 82px; z-index: 11; display: grid; gap: 5px; justify-items: end; max-width: calc(100% - 24px); font-size: 12px; }
.b3d-construction-notices [data-screw-reminder] { background: #fff; border: 1px solid #a4c63a; border-radius: 8px; padding: 4px 8px; }
.b3d-construction-notices button { min-height: 36px; padding: 5px 10px; background: #fff; border: 1px solid #b8bdc5; border-radius: 8px; color: #303741; cursor: pointer; font: inherit; }
.b3d-problem-help { position: fixed; z-index: 31; width: 300px; max-width: calc(100vw - 16px); box-sizing: border-box; padding: 12px; border: 1px solid #b8bdc5; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.b3d-problem-help p { margin: 0 0 8px; }
.b3d-problem-help button { min-height: 44px; padding: 5px 12px; background: #fff; color: #303741; border: 1px solid #b8bdc5; border-radius: 8px; cursor: pointer; font: inherit; }
.b3d-warn__acts { flex-wrap: wrap; }
.b3d-construction-notices button:focus-visible, .b3d-problem-help button:focus-visible, .b3d-warnings-off:focus-visible { outline: 3px solid #000f99; outline-offset: 2px; }
@media (max-width: 720px) {
  .b3d .b3d-warnings-off { right: 8px; bottom: calc(var(--b3d-palette-covered, 122px) + 60px); min-height: 32px; }
  .b3d-construction-notices { top: 66px; right: 8px; }
  .b3d-construction-notices button { min-height: 44px; }
}
@media print { .b3d-construction-notices, .b3d-problem-help, .b3d-warnings-off { display: none !important; } }

/* === Nawigacja — Ruling 296 (2026-10-30) ===================================================================
   Komputer: pasek ZAWSZE w jednym rzędzie. Gdy brakuje miejsca (tryb projektu, „Przywróć poprzedni”, konkurs,
   „Wróć do budowania”, wąskie okno), panels.js (fitToolbar) dokłada is-fit-1…5 — każdy chowa kolejne napisy
   (zostaje ikona + dymek; nazwa dla czytnika w span.b3d-nav__txt). Panele pod paskiem: --b3d-toolbar-bottom.
   Telefon: „Menu” to jeden przewijany arkusz z sekcjami (Przykłady, Projekt, Widok, Dla nauczyciela, Pomoc, Uwagi). */

.b3d-tools--examples:not(:has(> *)) { display: none; }
.b3d-nav__txt { white-space: nowrap; }

/* Pozycje rozwijanych menu: jedna wysokość, ikona, napis bez zawijania, ten sam wygląd pod kursorem. */
.b3d-tools .b3d-drop__menu button,
.b3d-drop__link { min-height: 38px; white-space: nowrap; align-items: center; }
.b3d-tools .b3d-drop__menu button:hover:not(:disabled),
.b3d-tools .b3d-drop__menu .b3d-toggle:hover:not(:disabled),
.b3d-drop__link:hover { background: #f1f3fb; border-color: transparent; }
.b3d-tools .b3d-drop__menu button.is-danger { color: var(--b3d-danger); }
.b3d-tools .b3d-drop__menu button.is-danger:hover:not(:disabled) { background: #fdecec; }
.b3d-drop__menu > .b3d-drop__group:first-child,
.b3d-drop__menu > [hidden]:first-child + .b3d-drop__group { border-top: 0; padding-top: 0; }
.b3d-drop__group:not(:has(> :not([hidden]):not(.b3d-drop__label))) { display: none; }
.b3d-view-label { justify-content: flex-start; gap: 10px; min-height: 38px; padding: 4px 10px; font-weight: 600; color: var(--b3d-brand-dark); }
.b3d-view-label > .b3d-ico { color: var(--b3d-brand); }
.b3d-view-label select { margin-left: auto; }
[data-view="note"] { padding: 0 10px 4px; font-size: 12px; color: var(--b3d-ink-soft); }
/* Klawisz skrótu jako mały znaczek tuż przed suwakiem (bez słowa „klawisz” — jest w dymku). */
.b3d-drop__menu .b3d-key-hint kbd { margin: 0; }
@media (hover: hover) and (pointer: fine) {
	.b3d-key-hint { margin-left: auto; }
	.b3d-tools .b3d-drop__menu .b3d-toggle:has(> .b3d-key-hint)::after { margin-left: 8px; }
}
/* Autorzy tekstur: mały link na samym dole menu „Widok”. */
.b3d-tools .b3d-drop__menu button.b3d-drop__credits {
	width: auto; align-self: flex-start; margin: 2px 6px 0; padding: 4px; font-size: 12px; font-weight: 600;
	color: var(--b3d-ink-soft); text-decoration: underline; text-underline-offset: 2px; background: none; border-color: transparent;
}

/* Znaczek „Bez fizyki” zamiast linii tekstu w pasku: klik wyłącza tryb, wyjaśnienie w dymku. */
.b3d-design-badge { cursor: pointer; background: none; border: 0; border-bottom: 2px solid #a4c63a; border-radius: 0; padding: 2px 1px; font-family: inherit; }
.b3d-design-badge:hover { color: var(--b3d-brand-dark); border-bottom-color: #7f9e22; }

@media (min-width: 721px) and (min-height: 501px), (min-width: 721px) and (pointer: fine), (min-width: 721px) and (pointer: none) {
	.b3d-toolbar,
	.b3d-toolbar:has(.b3d-project-limit:not([hidden])) { flex-wrap: nowrap; }
	.b3d-toolbar > *,
	.b3d-menubar__items > * { flex: none; }
	.b3d-toolbar .b3d-tools { flex-wrap: nowrap; }
	.b3d-toolbar .b3d-tools button,
	.b3d-toolbar .b3d-drop > summary { white-space: nowrap; }
	/* Powód braku Testuj (ponad 200 kostek) — chmurka pod paskiem, nie drugi rząd paska. */
	.b3d-project-limit {
		position: absolute; top: calc(100% + 6px); left: 0; z-index: 2; order: 0; flex: none;
		width: max-content; max-width: min(560px, 100%); padding: 6px 10px; font-size: 13px;
		background: #fff; border: 1px solid var(--b3d-line); border-radius: 10px; box-shadow: 0 6px 18px rgba(16, 22, 60, 0.12);
	}
	/* is-fit-1: Pomoc i „Przywróć poprzedni” — same ikony. */
	.b3d-toolbar.is-fit-1 .b3d-nav-help .b3d-nav__txt,
	.b3d-toolbar.is-fit-1 [data-act="restore"] .b3d-nav__txt,
	/* is-fit-3: „Dla nauczyciela” — sama ikona. */
	.b3d-toolbar.is-fit-3 [data-nav="nauczyciel"] > summary .b3d-nav__txt,
	/* is-fit-4: Projekt i Widok — same ikony. */
	.b3d-toolbar.is-fit-4 [data-nav="projekt"] > summary .b3d-nav__txt,
	.b3d-toolbar.is-fit-4 [data-nav="widok"] > summary .b3d-nav__txt,
	/* is-fit-5: Przykłady — sama ikona. */
	.b3d-toolbar.is-fit-5 .b3d-nav-examples .b3d-nav__txt {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
		clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
	}
	.b3d-toolbar.is-fit-1 .b3d-nav-help,
	.b3d-toolbar.is-fit-1 [data-act="restore"],
	.b3d-toolbar.is-fit-5 .b3d-nav-examples { min-width: 36px; padding-left: 8px; padding-right: 8px; justify-content: center; }
	/* is-fit-2: menu bez ikon (napis wystarcza), ciaśniejsze odstępy. */
	.b3d-toolbar.is-fit-2 { column-gap: 5px; padding-left: 6px; padding-right: 6px; }
	.b3d-toolbar.is-fit-2 .b3d-tools { gap: 4px; }
	.b3d-toolbar.is-fit-2 .b3d-drop > summary > .b3d-ico { display: none; }
	/* … a menu ze schowanym napisem wraca do ikony. */
	.b3d-toolbar.is-fit-3 [data-nav="nauczyciel"] > summary > .b3d-ico,
	.b3d-toolbar.is-fit-4 [data-nav="projekt"] > summary > .b3d-ico,
	.b3d-toolbar.is-fit-4 [data-nav="widok"] > summary > .b3d-ico { display: block; }
	.b3d-toolbar.is-fit-5 .b3d-contest-send__wide { display: none; }
	.b3d-toolbar.is-fit-5 .b3d-contest-send__short { display: inline; }
	/* is-fit-6: bez znaku SCUBE (strona główna jest też w „Projekt”). */
	.b3d-toolbar.is-fit-6 > .b3d-brand { display: none; }
	/* Ostatnia deska (tablet pionowo, cele 44 px): drugi rząd zamiast chowania „Testuj” — panele i tak biorą
	   górę z --b3d-toolbar-bottom. Od 1024 px nie występuje (smoke-nav). */
	.b3d-toolbar.is-fit-wrap { flex-wrap: wrap; row-gap: 6px; }
	.b3d-toolbar.is-fit-wrap .b3d-tools--end { margin-left: auto; }
}

/* Telefon: na pasku Cofnij · Ponów · Testuj · Menu (Dźwięki są w „Widok”). „Menu” = jeden przewijany arkusz. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
	.b3d-toolbar .b3d-tools--aux { display: none; }
	.b3d-menubar.is-narrow > .b3d-menubar__items {
		width: min(340px, calc(100vw - 48px)); /* zawsze pasek sceny obok — stuknięcie w niego zamyka „Menu” */
		max-height: calc(100vh - var(--b3d-toolbar-bottom, 72px) - 8px);
		max-height: calc(100dvh - var(--b3d-toolbar-bottom, 72px) - 8px);
		gap: 2px; padding: 8px 10px 10px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	}
	/* Nagłówki sekcji: podpis, nie przycisk (panels.js: klik nic nie zwija, tabindex = -1). */
	.b3d-menubar.is-narrow .b3d-drop > summary {
		display: block; min-height: 0; margin: 8px 0 0; padding: 10px 6px 4px; cursor: default;
		font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--b3d-ink-soft);
		background: none; border: 0; border-top: 1px solid var(--b3d-line); border-radius: 0;
	}
	.b3d-menubar.is-narrow .b3d-drop > summary::after,
	.b3d-menubar.is-narrow .b3d-drop > summary > .b3d-ico { display: none; content: none; }
	.b3d-menubar.is-narrow .b3d-drop__menu { position: static; min-width: 0; margin: 0; padding: 0; gap: 2px; border: 0; border-radius: 0; box-shadow: none; }
	.b3d-menubar.is-narrow .b3d-drop__group { border-top: 0; padding-top: 0; gap: 2px; }
	.b3d-menubar.is-narrow .b3d-drop__label { margin: 6px 6px 0; }
	.b3d-menubar.is-narrow .b3d-drop__menu button,
	.b3d-menubar.is-narrow .b3d-drop__link,
	.b3d-menubar.is-narrow .b3d-menubar__items > button,
	.b3d-menubar.is-narrow .b3d-menubar__foot > button {
		display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px 8px;
		font-size: 15px; text-align: left; white-space: normal; border-radius: 10px;
	}
	.b3d-menubar.is-narrow .b3d-view-label { min-height: 44px; padding: 4px 8px; font-size: 15px; }
	.b3d-menubar.is-narrow [data-view="note"] { max-width: none; padding: 0 8px 4px; }
	/* „Przykłady” — pierwszy, duży przycisk arkusza. */
	.b3d-menubar.is-narrow .b3d-menubar__items > [data-act="examples"] {
		min-height: 52px; margin: 0 0 6px; font-size: 16px; font-weight: 800;
		color: #fff; background: var(--b3d-brand); border-color: var(--b3d-brand);
	}
	.b3d-menubar.is-narrow .b3d-menubar__items > [data-act="examples"] .b3d-ico { color: #fff; }
	.b3d-menubar.is-narrow .b3d-menubar__items > [data-act="examples"]:hover:not(:disabled) { background: var(--b3d-brand-dark); border-color: var(--b3d-brand-dark); }
	.b3d-menubar.is-narrow .b3d-menubar__foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--b3d-line); }
	.b3d-menubar.is-narrow .b3d-contest-menu { padding: 4px 6px 8px; }
}
/* Telefon: „Przykłady” także samą ikoną na pasku (zaraz za Cofnij / Ponów), gdy się mieści. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
	.b3d-toolbar .b3d-tools--examples { order: 1; flex: none; }
	.b3d-menubar.is-narrow .b3d-drop > summary { color: var(--b3d-brand); font-size: 13px; }
}
/* Ze znaczkiem „Bez fizyki” albo w konkursie ikona się nie mieści (390 px: o 8 px) — „Przykłady” są wtedy na górze „Menu”. */
@media (max-width: 420px) {
	.b3d-toolbar:has([data-design-badge]:not([hidden])) .b3d-nav-examples-ibtn,
	.b3d-toolbar:has([data-contest-send]:not([hidden])) .b3d-nav-examples-ibtn { display: none !important; }
}
/* Pokaz (kiosk.js sam stawia „Przykłady” na pasku) i konkurs (bez przykładów): bez ikony skrótu i pustej grupy. */
.is-kiosk .b3d-nav-examples-ibtn, .b3d.is-contest .b3d-nav-examples-ibtn,
.is-kiosk .b3d-tools--examples:not(:has(> [data-act="examples"])),
.b3d.is-contest .b3d-tools--examples { display: none !important; }