/* EscapeVerse → Strony www (HTML, CSS, JavaScript, HTML+CSS+JS): style sekcji „Trening” (www-tools.js, www-sql-tools.js, www-php-tools.js), dodatków kompendium
   i motywów escape roomów: .esc-wh (HTML, pomarańcz), .esc-wc (CSS, niebieski), .esc-wj (JS, żółty), .esc-wp (projekt, zieleń).
   Kolorystyka stron: .ev-wh / .ev-wc / .ev-wj / .ev-wp. Animacje tylko transform/opacity. */

/* ── Sekcja „Trening” ── */
.www-lab-sec { position: relative; margin-top: 4.5rem; }
.www-lab-sec > .tl3d-head { margin-bottom: 1.2rem; }
.www-lab { --acc: var(--blue); }
.www-lab-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1rem; }
.www-lab-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px; cursor: pointer; font: 700 .95rem 'Space Grotesk', sans-serif; color: var(--text);
  background: var(--bg2); border: 1px solid var(--border); transition: border-color .2s, background-color .2s; }
.www-lab-tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 60%, #000)); border-color: transparent; }
.www-lab-tab:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.www-panel { padding: 1.1rem; border-radius: 20px; background: var(--bg2); border: 1px solid var(--border); }
.www-panel[hidden] { display: none; }
.www-note { margin: .7rem 0 0; font-size: .82rem; color: var(--muted); }
.www-note i { margin-right: .3rem; }

/* przyciski */
.www-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; border-radius: 12px; cursor: pointer; font: 700 .9rem 'Inter', sans-serif; color: #fff;
  background: var(--acc); border: 1px solid var(--acc); transition: transform .15s, filter .2s; }
.www-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.www-btn:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.www-btn.ghost { color: var(--text); background: transparent; border-color: var(--border); }
.www-btn.ghost:hover { border-color: var(--acc); }
.www-btn.good { background: #16A34A; border-color: #16A34A; }
.www-btn.bad { color: #DC2626; border-color: color-mix(in srgb, #DC2626 40%, transparent); }
.www-btn.big { padding: .9rem 1.6rem; font-size: 1.05rem; }
.www-btn[hidden] { display: none; }
.www-mini { padding: .15rem .5rem; border-radius: 6px; cursor: pointer; font-size: .74rem; color: var(--muted); background: transparent; border: 1px solid var(--border); }
.www-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .6rem; }
.www-bar.center { justify-content: center; }
.www-auto { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--muted); }
.www-ex { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.www-ex[hidden] { display: none; }

/* edytor */
.www-ed { border-radius: 14px; overflow: hidden; border: 1px solid #2A3144; background: #0F1422; }
.www-tabs { display: flex; gap: 2px; padding: .35rem .35rem 0; background: #171D2E; }
.www-tab { padding: .45rem .9rem; border-radius: 8px 8px 0 0; cursor: pointer; font: 700 .78rem 'Space Mono', monospace; color: #8A94AD; background: transparent; border: 0; }
.www-tab[aria-selected="true"] { color: #fff; background: #0F1422; }
.www-tab-html[aria-selected="true"] { box-shadow: inset 0 2px 0 #E34F26; }
.www-tab-css[aria-selected="true"] { box-shadow: inset 0 2px 0 #33A9DC; }
.www-tab-js[aria-selected="true"] { box-shadow: inset 0 2px 0 #F7DF1E; }
.www-tab-php[aria-selected="true"] { box-shadow: inset 0 2px 0 #777BB4; }
.www-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.www-code { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); height: 320px; }
.www-lines { margin: 0; padding: .7rem .5rem .7rem .7rem; overflow: hidden; text-align: right; user-select: none; font: .82rem/1.55 'Space Mono', ui-monospace, monospace; color: #4C5672; background: #0F1422; border-right: 1px solid #1E2538; }
.www-ta { width: 100%; height: 100%; margin: 0; padding: .7rem .8rem; resize: none; border: 0; outline: none; white-space: pre; overflow: auto; tab-size: 2;
  font: .82rem/1.55 'Space Mono', ui-monospace, monospace; color: #E6EAF5; background: #0F1422; caret-color: #FFD166; }
.www-ta:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--acc) 70%, transparent); }

/* podgląd i konsola */
.www-sb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.www-preview { border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.www-browser-bar { display: flex; align-items: center; gap: .3rem; padding: .4rem .6rem; background: #E8EBF0; border-bottom: 1px solid #D5DAE2; }
.www-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #C3C9D3; }
.www-browser-bar em { margin-left: .5rem; padding: .1rem .6rem; border-radius: 6px 6px 0 0; font-style: normal; font-size: .74rem; color: #333; background: #fff; }
.www-frame { display: block; width: 100%; height: 320px; border: 0; background: #fff; }
.www-frame.small { height: 220px; }
/* podgląd strony z prawdziwego PHP (www-phprun.js) */
.php-pv .www-browser-bar em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.php-st { margin-left: auto; flex: none; padding: .1rem .45rem; border-radius: 6px; font: 700 .7rem 'Space Mono', monospace; color: #166534; background: #DCFCE7; }
.php-st.bad { color: #991B1B; background: #FEE2E2; }
.php-st[hidden] { display: none; }
.php-fr { position: relative; }
.php-load { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; text-align: center; font-size: .86rem; color: #334155; background: rgba(255, 255, 255, .88); }
.php-load[hidden] { display: none; }
.php-errs { margin-top: .5rem; border-radius: 10px; background: #0F1422; max-height: 170px; }
.php-errs[hidden] { display: none; }
.php-errs small { color: #9AA4BF; }
.php-dbnote { margin: .6rem 0 0; font-size: .84rem; color: var(--muted); }
.www-console { margin-top: .6rem; border-radius: 12px; overflow: hidden; border: 1px solid #2A3144; background: #0F1422; }
.www-console-head { display: flex; justify-content: space-between; align-items: center; padding: .35rem .7rem; font: 700 .74rem 'Space Mono', monospace; color: #8A94AD; background: #171D2E; }
.www-log { list-style: none; margin: 0; padding: .4rem .7rem; max-height: 120px; min-height: 2.4rem; overflow: auto; font: .78rem/1.5 'Space Mono', ui-monospace, monospace; color: #D7DCEA; }
.www-log li { padding: .1rem 0; border-bottom: 1px solid #1A2033; overflow-wrap: anywhere; }
.www-log-error { color: #FF7A90; } .www-log-warn { color: #FFD166; } .www-log-info { color: #7CC4FF; }
.www-demo-log { margin-top: .5rem; border-radius: 10px; background: #0F1422; }
.www-demo-log[hidden] { display: none; }

/* przykład w kompendium */
.www-demo-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.www-demo-code { min-width: 0; }
.www-demo-code .tl3d-code { margin: 0 0 .5rem; font-size: .76rem; max-height: 300px; overflow: auto; }
.www-demo-try { margin-top: .6rem; }

/* ── Misje ── */
.www-xp { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem .9rem; margin-bottom: 1rem; border-radius: 16px;
  background: color-mix(in srgb, var(--acc) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--acc) 25%, transparent); }
.www-xp.gain { animation: www-gain .8s ease; }
@keyframes www-gain { 30% { transform: scale(1.02); } }
.www-xp-lvl { display: flex; align-items: center; gap: .6rem; }
.www-xp-lvl b { display: block; font: 700 1rem 'Space Grotesk', sans-serif; }
.www-xp-lvl small { color: var(--muted); font-size: .78rem; }
.www-xp-badge { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; font: 700 1.1rem 'Space Grotesk', sans-serif; color: #fff; background: linear-gradient(135deg, var(--acc), #F59E0B); }
.www-xp-bar { flex: 1 1 160px; height: 10px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.www-xp-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), #F59E0B); transform-origin: left; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.www-xp-done { font: 700 .82rem 'Space Mono', monospace; color: var(--muted); }
.www-ms { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1rem; }
.www-ms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; max-height: 640px; overflow: auto; }
.www-ms-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: .5rem; width: 100%; padding: .5rem .55rem; border-radius: 10px; cursor: pointer; text-align: left;
  font: inherit; font-size: .85rem; color: var(--text); background: transparent; border: 1px solid transparent; }
.www-ms-item:hover:not(:disabled) { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.www-ms-item.cur { border-color: color-mix(in srgb, var(--acc) 45%, transparent); background: color-mix(in srgb, var(--acc) 10%, transparent); font-weight: 700; }
.www-ms-item .n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font: 700 .8rem 'Space Mono', monospace; background: color-mix(in srgb, var(--text) 8%, transparent); }
.www-ms-item.done .n { color: #fff; background: #16A34A; }
.www-ms-item small { font-size: .7rem; color: var(--muted); }
.www-ms-item:disabled { opacity: .45; cursor: not-allowed; }
.www-ms-item:focus-visible { outline: 3px solid var(--acc); outline-offset: 1px; }
.www-ms-main { position: relative; min-width: 0; }
.www-ms-task { margin-bottom: .8rem; }
.www-ms-num { font: 700 .74rem 'Space Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--acc); }
.www-ms-task h4 { margin: .2rem 0 .4rem; font: 700 1.25rem 'Space Grotesk', sans-serif; }
.www-ms-desc p { margin: 0; }
.www-ms-work { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.www-ms-work .www-code { height: 300px; }
.www-ms-work .www-frame { height: 260px; }
.www-ms-hint { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 10px; font-size: .9rem; background: color-mix(in srgb, #F59E0B 12%, transparent); border: 1px solid color-mix(in srgb, #F59E0B 35%, transparent); }
.www-ms-hint[hidden] { display: none; }
.www-tests { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .3rem; font-size: .88rem; }
.www-tests li { display: flex; gap: .5rem; align-items: baseline; color: var(--muted); }
.www-tests li.ok { color: #16A34A; } .www-tests li.bad { color: #DC2626; }
body:not(.light) .www-tests li.ok { color: #4ADE80; } body:not(.light) .www-tests li.bad { color: #FF7A90; }
.www-ms-next { margin-top: .4rem; }
.www-cele { position: absolute; left: 50%; top: 40%; z-index: 5; padding: .6rem 1.2rem; border-radius: 14px; pointer-events: none; white-space: nowrap;
  font: 700 1.6rem 'Space Grotesk', sans-serif; color: #fff; background: linear-gradient(135deg, var(--acc), #F59E0B); box-shadow: 0 16px 40px -10px rgba(0,0,0,.4);
  transform: translate(-50%, -50%); animation: www-cele 1.9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes www-cele { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%); } }

/* ── Fiszki ── */
.www-fc { display: flex; flex-direction: column; align-items: center; text-align: center; }
.www-fc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; width: 100%; max-width: 520px; margin-bottom: 1rem; }
.www-fc-stats span { flex: 1 1 0; min-width: 80px; padding: .4rem; border-radius: 10px; font-size: .74rem; color: var(--muted); background: color-mix(in srgb, var(--text) 5%, transparent); }
.www-fc-stats b { display: block; font: 700 1.2rem 'Space Grotesk', sans-serif; color: var(--text); }
.www-fc-stats .b3 b { color: #16A34A; }
.www-fc-prog { flex-basis: 100%; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.www-fc-prog span { display: block; height: 100%; background: #16A34A; transform-origin: left; transition: transform .4s; }
.www-fc-card { width: min(100%, 460px); height: 220px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; font: inherit; color: var(--text); }
.www-fc-in { position: relative; display: block; width: 100%; height: 100%; transition: transform .55s cubic-bezier(.4, .2, .2, 1); transform-style: preserve-3d; }
.www-fc-card[aria-pressed="true"] .www-fc-in { transform: rotateY(180deg); }
.www-fc-front, .www-fc-back { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.2rem;
  border-radius: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--border); }
.www-fc-front { background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, var(--bg)), var(--bg)); }
.www-fc-front small { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.www-fc-front code { font: 700 1.5rem 'Space Mono', monospace; color: var(--acc); overflow-wrap: anywhere; }
.www-fc-back { transform: rotateY(180deg); background: var(--bg); font-size: 1.05rem; }
.www-fc-back code.ex { font: .85rem 'Space Mono', monospace; padding: .3rem .6rem; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow-wrap: anywhere; }
.www-fc-card:focus-visible { outline: 3px solid var(--acc); outline-offset: 4px; border-radius: 20px; }
.www-fc-tip { margin: .6rem 0 0; font-size: .8rem; color: var(--muted); }
.www-fc .www-mini { margin-top: 1rem; }

/* ── Gra na czas ── */
.www-rush { max-width: 560px; margin: 0 auto; text-align: center; }
.www-rush-intro h4 { margin: .6rem 0 .4rem; font: 700 1.5rem 'Space Grotesk', sans-serif; }
.www-rush-intro ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1rem; margin: .8rem 0 1.2rem; padding: 0; font-size: .88rem; color: var(--muted); }
.www-rush-ico { width: 64px; height: 64px; display: inline-grid; place-items: center; border-radius: 20px; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--acc), #F59E0B); }
.www-rush-best { margin-top: .8rem; color: var(--muted); }
.www-rush-score b { font: 700 3rem 'Space Grotesk', sans-serif; color: var(--acc); }
.www-rush-hud { display: flex; justify-content: center; gap: 1.4rem; font: 700 1.1rem 'Space Mono', monospace; }
.www-rush-combo { color: #F97316; }
.www-rush-time { height: 8px; margin: .6rem 0 1rem; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.www-rush-time span { display: block; height: 100%; background: linear-gradient(90deg, #16A34A, #F59E0B, #DC2626); transform-origin: left; }
.www-rush-q { min-height: 3em; margin: 0 0 .8rem; font: 700 1.35rem/1.35 'Space Grotesk', sans-serif; }
.www-rush-form { display: flex; gap: .4rem; }
.www-rush-in { flex: 1; min-width: 0; padding: .8rem 1rem; border-radius: 12px; font: 700 1.1rem 'Space Mono', monospace; color: var(--text); background: var(--bg); border: 2px solid var(--border); outline: none; }
.www-rush-in:focus { border-color: var(--acc); }
.www-rush-in.shake, .wh-in.shake { animation: www-shake .4s; }
@keyframes www-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.www-rush-fb { min-height: 1.5em; margin: .6rem 0 0; font-weight: 700; }
.www-rush-fb.ok { color: #16A34A; } .www-rush-fb.bad { color: #DC2626; }

/* ── Dodatki kompendium CSS ── */
.wc-lab-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 1rem; align-items: center; }
.wc-sw { height: 140px; border-radius: 18px; border: 1px solid var(--border); }
.wc-sl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3.4rem; align-items: center; gap: .6rem; margin: .35rem 0; font-size: .86rem; }
.wc-sl input { width: 100%; accent-color: var(--acc); }
.wc-sl b { font: 700 .82rem 'Space Mono', monospace; text-align: right; }
.wc-out { margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wc-box-stage { display: flex; justify-content: center; padding: .5rem; margin-bottom: .6rem; }
.wc-bx-m { position: relative; background: repeating-linear-gradient(45deg, rgba(245, 158, 11, .18) 0 6px, rgba(245, 158, 11, .08) 6px 12px); border: 1px dashed #F59E0B; }
.wc-bx-b { position: relative; border: 4px solid #0EA5E9; background: rgba(34, 197, 94, .18); }
.wc-bx-p { position: relative; }
.wc-bx-c { padding: .8rem 1.4rem; font: 700 .85rem 'Space Mono', monospace; color: #fff; background: #6366F1; border-radius: 4px; }
.wc-bl { position: absolute; top: 1px; left: 4px; font: 700 .6rem 'Space Mono', monospace; color: var(--muted); }
.wc-fx { display: flex; height: 160px; gap: 8px; padding: 8px; margin-bottom: .6rem; border-radius: 12px; background: color-mix(in srgb, var(--acc) 8%, var(--bg)); border: 1px dashed color-mix(in srgb, var(--acc) 40%, transparent); }
.wc-fx span { display: grid; place-items: center; min-width: 44px; min-height: 36px; padding: 0 .6rem; border-radius: 8px; font: 700 1rem 'Space Grotesk', sans-serif; color: #fff; background: var(--acc); transition: none; }
.wc-fx-g { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .35rem 0; }
.wc-fx-g code { min-width: 9.5rem; font-weight: 700; }

/* ── Dodatki kompendium projektu ── */
.ww-tree { line-height: 1.6; }
.ww-url-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: .6rem .8rem; border-radius: 12px; font: 700 1.05rem 'Space Mono', monospace; background: var(--bg); border: 1px solid var(--border); overflow-wrap: anywhere; }
.ww-url-bar > i { color: #16A34A; margin-right: .4rem; }
.ww-url-p { padding: .2rem .25rem; border-radius: 6px; cursor: pointer; font: inherit; color: var(--text); background: transparent; border: 0; border-bottom: 3px solid currentColor; }
.ww-url-p[aria-pressed="true"] { background: color-mix(in srgb, currentColor 14%, transparent); }
.ww-url-p:focus-visible { outline: 2px solid var(--acc); }
.p0 { color: #16A34A; } .p1 { color: #8B5CF6; } .p2 { color: #2563EB; } .p3 { color: #EA580C; } .p4 { color: #DB2777; } .p5 { color: #0D9488; }
.ww-url-info { margin-top: .6rem; min-height: 3em; }
.ww-url-info b.p0, .ww-url-info b.p1, .ww-url-info b.p2, .ww-url-info b.p3, .ww-url-info b.p4, .ww-url-info b.p5 { font-family: 'Space Mono', monospace; }
.ww-ftp-login { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .8rem; padding: .6rem .8rem; margin-bottom: .6rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.ww-ftp-login span { display: flex; flex-direction: column; font-size: .8rem; }
.ww-ftp-login small { color: var(--muted); }
.ww-ftp-login .on { color: #16A34A; border-color: #16A34A; }
.ww-ftp-panes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: center; }
.ww-ftp-panes ul { list-style: none; margin: 0; padding: .4rem; min-height: 150px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); font: .8rem/1.8 'Space Mono', monospace; }
.ww-ftp-panes li { padding: 0 .3rem; border-radius: 4px; overflow-wrap: anywhere; }
.ww-ftp-panes li.sent { opacity: .45; }
.ww-ftp-panes li.new { animation: ww-in .4s ease; color: #16A34A; }
@keyframes ww-in { from { opacity: 0; transform: translateX(-10px); } }
.ww-ftp-empty { color: var(--muted); }
.ww-ftp-arrow { color: var(--acc); font-size: 1.3rem; }
.ww-ftp-log { margin: .6rem 0; padding: .45rem .7rem; border-radius: 8px; font: .78rem 'Space Mono', monospace; color: #D7DCEA; background: #0F1422; }
.ww-check ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .35rem .8rem; }
.ww-check label { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; padding: .3rem; border-radius: 8px; }
.ww-check input { margin-top: .25rem; width: 18px; height: 18px; accent-color: #16A34A; flex: none; }
.ww-check input:checked + span { color: var(--muted); text-decoration: line-through; }

@media (max-width: 860px) {
  .www-sb, .www-ms-work, .www-demo-grid { grid-template-columns: minmax(0, 1fr); }
  .www-ms { grid-template-columns: minmax(0, 1fr); }
  .www-ms-list { flex-direction: row; overflow-x: auto; max-height: none; padding-bottom: .3rem; }
  .www-ms-list li { flex: none; }
  .www-ms-item { grid-template-columns: 28px auto; width: auto; white-space: nowrap; }
  .www-ms-item small { display: none; }
  .www-code { height: 260px; }
  .ww-ftp-panes { grid-template-columns: minmax(0, 1fr); }
  .ww-ftp-arrow { transform: rotate(90deg); justify-self: center; }
}
@media (max-width: 560px) {
  .www-panel { padding: .8rem; border-radius: 16px; }
  .www-lab-tab { padding: .55rem .8rem; font-size: .85rem; }
  .www-lab-tab span { display: none; }
  .www-lab-tab[aria-selected="true"] span { display: inline; }
  .wc-lab-grid { grid-template-columns: minmax(0, 1fr); }
  .wc-sw { height: 80px; }
  .wc-sl { grid-template-columns: 5.4rem minmax(0, 1fr) 3rem; }
  .wc-fx-g code { min-width: 100%; }
  .www-rush-q { font-size: 1.15rem; }
  .www-fc-card { height: 200px; }
}

/* ── Kolorystyka stron kursów ── */
.ev-wh .tl3d-core, body:not(.light) .ev-wh .tl3d-core, .ev-wh .tl3d-kicker, body:not(.light) .ev-wh .tl3d-kicker { background: linear-gradient(135deg, #E34F26, #B8360F); }
.ev-wc .tl3d-core, body:not(.light) .ev-wc .tl3d-core, .ev-wc .tl3d-kicker, body:not(.light) .ev-wc .tl3d-kicker { background: linear-gradient(135deg, #1572B6, #6A2DBF); }
.ev-wj .tl3d-core, body:not(.light) .ev-wj .tl3d-core, .ev-wj .tl3d-kicker, body:not(.light) .ev-wj .tl3d-kicker { background: linear-gradient(135deg, #D4B000, #8A6D00); }
.ev-wp .tl3d-core, body:not(.light) .ev-wp .tl3d-core, .ev-wp .tl3d-kicker, body:not(.light) .ev-wp .tl3d-kicker { background: linear-gradient(135deg, #059669, #1D4ED8); }
.ev-wh .tl3d-core { box-shadow: 0 0 0 10px rgba(227, 79, 38, .12), 0 24px 60px -20px rgba(227, 79, 38, .55); }
.ev-wc .tl3d-core { box-shadow: 0 0 0 10px rgba(21, 114, 182, .12), 0 24px 60px -20px rgba(21, 114, 182, .55); }
.ev-wj .tl3d-core { box-shadow: 0 0 0 10px rgba(212, 176, 0, .14), 0 24px 60px -20px rgba(160, 130, 0, .55); }
.ev-wp .tl3d-core { box-shadow: 0 0 0 10px rgba(5, 150, 105, .12), 0 24px 60px -20px rgba(5, 150, 105, .55); }

.www-lab.ev-wh { --acc: #E34F26; } .www-lab.ev-wc { --acc: #1572B6; } .www-lab.ev-wj { --acc: #A68A00; } .www-lab.ev-wp { --acc: #059669; }
body:not(.light) .www-lab.ev-wh { --acc: #FF7A4D; } body:not(.light) .www-lab.ev-wc { --acc: #4FB3F0; } body:not(.light) .www-lab.ev-wj { --acc: #F7DF1E; } body:not(.light) .www-lab.ev-wp { --acc: #34D399; }
body:not(.light) .www-lab.ev-wj .www-btn:not(.ghost):not(.good), body:not(.light) .www-lab.ev-wj .www-lab-tab[aria-selected="true"], body:not(.light) .www-lab.ev-wj .www-xp-badge { color: #1A1A1A; }
.tl-escape.ev-wh::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #E34F26 14%, var(--bg)), var(--bg) 70%); }
.tl-escape.ev-wc::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #1572B6 14%, var(--bg)), var(--bg) 70%); }
.tl-escape.ev-wj::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #D4B000 14%, var(--bg)), var(--bg) 70%); }
.tl-escape.ev-wp::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #059669 14%, var(--bg)), var(--bg) 70%); }
@media (min-width: 1280px) and (max-height: 900px) { .ev-wh .tl3d-core, .ev-wc .tl3d-core, .ev-wj .tl3d-core, .ev-wp .tl3d-core { box-shadow: none; } }

/* ── Wspólne dla 4 escape roomów: kolory konsoli z jednej zmiennej ── */
.esc.esc-wh, .esc.esc-wc, .esc.esc-wj, .esc.esc-wp { border-color: color-mix(in srgb, var(--c1) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c2) 15%, transparent) inset, 0 30px 80px -30px color-mix(in srgb, var(--c1) 40%, transparent), 0 0 60px -20px color-mix(in srgb, var(--c2) 40%, transparent); }
.esc-wh .esc-grid, .esc-wc .esc-grid, .esc-wj .esc-grid, .esc-wp .esc-grid { background-image: linear-gradient(color-mix(in srgb, var(--c1) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c2) 35%, transparent) 1px, transparent 1px); }
.esc-wh .esc-btn, .esc-wc .esc-btn, .esc-wj .esc-btn, .esc-wp .esc-btn { background: linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 50%, #fff) 45%, var(--c2)); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 34px -8px color-mix(in srgb, var(--c1) 70%, transparent); }
.esc-wh .esc-btn.pulse, .esc-wc .esc-btn.pulse, .esc-wj .esc-btn.pulse, .esc-wp .esc-btn.pulse { animation-name: ww-pulse; }
@keyframes ww-pulse { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 0 0 10px color-mix(in srgb, var(--c1) 14%, transparent), 0 10px 40px -6px color-mix(in srgb, var(--c1) 80%, transparent); } }
.esc-wh .esc-ans .k, .esc-wc .esc-ans .k, .esc-wj .esc-ans .k, .esc-wp .esc-ans .k { background: color-mix(in srgb, var(--c1) 12%, transparent); border-color: color-mix(in srgb, var(--c1) 35%, transparent); }
.esc-wh .esc-ans:hover:not(:disabled), .esc-wc .esc-ans:hover:not(:disabled), .esc-wj .esc-ans:hover:not(:disabled), .esc-wp .esc-ans:hover:not(:disabled),
.esc-wh .esc-ghost:hover, .esc-wc .esc-ghost:hover, .esc-wj .esc-ghost:hover, .esc-wp .esc-ghost:hover { background: color-mix(in srgb, var(--c1) 12%, transparent); }
.esc-wh .esc-title, .esc-wc .esc-title, .esc-wj .esc-title, .esc-wp .esc-title { text-shadow: 0 0 30px color-mix(in srgb, var(--c1) 30%, transparent); }
.esc-wh .esc-rules i, .esc-wc .esc-rules i, .esc-wj .esc-rules i, .esc-wp .esc-rules i { background: color-mix(in srgb, var(--c1) 14%, transparent); }
.esc-wh .esc-life, .esc-wc .esc-life, .esc-wj .esc-life, .esc-wp .esc-life { color: var(--warn); }
.esc-wh .esc-door, .esc-wc .esc-door, .esc-wj .esc-door, .esc-wp .esc-door { background: radial-gradient(60% 60% at 50% 50%, #fff, color-mix(in srgb, var(--c1) 40%, #fff) 25%, color-mix(in srgb, var(--c1) 35%, transparent) 55%, transparent 75%), #07090F; }
.esc-wh .esc-door .fly, .esc-wc .esc-door .fly, .esc-wj .esc-door .fly, .esc-wp .esc-door .fly { width: 46%; filter: drop-shadow(0 0 14px var(--c1)); }
.esc-wh .esc-tile b, .esc-wc .esc-tile b, .esc-wj .esc-tile b, .esc-wp .esc-tile b { color: var(--c1); }
.esc-wh-dlg .esc-dlg-box, .esc-wc-dlg .esc-dlg-box, .esc-wj-dlg .esc-dlg-box, .esc-wp-dlg .esc-dlg-box { border-color: rgba(255,255,255,.2); }

/* HTML: kod pomarańczowy */
.esc.esc-wh { --c1: #FF7A4D; --c2: #FFC233; --ok: #3DDC84; --line: rgba(255, 122, 77, .25); background: radial-gradient(120% 90% at 50% -10%, #3A1D14 0%, #1A0F0C 50%, #0B0706 100%); }
.esc-wh .esc-btn { color: #2A0F05; }
.esc-wh .esc-term { color: #FFB38A; border-color: rgba(255, 122, 77, .3); }
.esc-wh .esc-term .cur { background: #FFB38A; }
.wh-br { width: 100%; max-width: 300px; border-radius: 12px; overflow: hidden; background: #FFFDF8; color: #222; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); font-family: 'Inter', sans-serif; }
.wh-bar { display: flex; align-items: center; gap: 3px; padding: 5px 7px; background: #E8EBF0; }
.wh-bar span { width: 7px; height: 7px; border-radius: 50%; background: #C3C9D3; }
.wh-bar em { margin-left: 5px; padding: 1px 6px; border-radius: 4px; font-style: normal; font-size: 9px; background: #fff; }
.wh-page { display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.wh-row { display: flex; gap: 4px; }
.wh-col { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wh-p { position: relative; min-height: 16px; border-radius: 4px; border: 1px dashed #D9C9BE; opacity: .35; font-size: 9px; transition: opacity .4s, transform .5s cubic-bezier(.3, 1.6, .5, 1); transform: scale(.94); }
.wh-p > * { visibility: hidden; }
.wh-p i { position: absolute; right: 2px; bottom: 1px; font: 700 7px 'Space Mono', monospace; font-style: normal; color: #E34F26; }
.wh-p.on { opacity: 1; transform: none; border: 1px solid transparent; }
.wh-p.on > * { visibility: visible; }
.wh-p.cur { opacity: .7; border-color: #FF7A4D; border-style: solid; animation: wh-blink 1s steps(1) infinite; }
@keyframes wh-blink { 50% { border-color: transparent; } }
.wh-header.on { display: flex; align-items: center; padding: 3px 5px; color: #fff; background: #E34F26; }
.wh-header b { font-size: 10px; }
.wh-nav.on { display: flex; gap: 6px; padding: 2px 5px; background: #FFE7DC; }
.wh-nav span { color: #B8360F; text-decoration: underline; }
.wh-h1.on { padding: 2px 4px; font: 700 12px 'Space Grotesk', sans-serif; }
.wh-img { width: 70px; min-height: 52px; }
.wh-img.on { display: grid; place-items: center; background: #DDF4E4; font-size: 26px; }
.wh-par.on, .wh-ul.on { display: flex; flex-direction: column; gap: 3px; padding: 3px; }
.wh-par span, .wh-ul span { display: block; height: 4px; border-radius: 2px; background: #C9C2BC; }
.wh-par span:last-of-type { width: 60%; }
.wh-ul span { margin-left: 6px; width: 70%; position: relative; }
.wh-ul span::before { content: ''; position: absolute; left: -5px; top: 0; width: 3px; height: 4px; border-radius: 50%; background: #E34F26; }
.wh-a { align-self: flex-start; }
.wh-a.on { padding: 2px 8px; color: #fff; background: #FF7A4D; border-radius: 99px; font-weight: 700; }
.wh-table { flex: 1; }
.wh-table.on { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 1px; background: #D9C9BE; }
.wh-table span { height: 7px; background: #fff; }
.wh-table span:nth-child(-n+3) { background: #FFE7DC; }
.wh-form { flex: 1; }
.wh-form.on { display: flex; gap: 2px; align-items: center; padding: 2px; }
.wh-form span { flex: 1; height: 9px; border: 1px solid #C9C2BC; border-radius: 2px; background: #fff; }
.wh-form b { width: 18px; height: 9px; border-radius: 2px; background: #E34F26; }
.wh-footer.on { padding: 2px 5px; color: #fff; background: #3A2A24; }
.wh-status { padding: 4px 8px; font: 700 8px 'Space Mono', monospace; letter-spacing: 1px; color: #FFB38A; background: #1A0F0C; }
.esc-rig.is-err .wh-status { color: var(--bad); }
.esc-rig.is-err .wh-br { animation: wh-err .5s; }
@keyframes wh-err { 25% { transform: translateX(-4px) rotate(-1deg); } 75% { transform: translateX(4px) rotate(1deg); } }
.wh-404 { align-items: center; justify-content: center; min-height: 170px; text-align: center; }
.wh-404 b { font: 700 40px 'Space Grotesk', sans-serif; color: #E34F26; }
.wh-404 span { font-size: 11px; }
.wh-dino { font-size: 34px; animation: wh-dino 1.4s ease-in-out infinite; }
@keyframes wh-dino { 50% { transform: translateY(-6px) rotate(-6deg); } }
.esc-play .esc-rig .wh-br { max-width: 300px; }
.wh-fix { display: flex; flex-direction: column; gap: .6rem; }
.wh-code { margin: 0; padding: .8rem 1rem; border-radius: 12px; white-space: pre-wrap; font: .95rem/1.6 'Space Mono', monospace; color: #FFE1D4; background: rgba(0,0,0,.45); border: 1px solid rgba(255, 122, 77, .35); }
.wh-gap { padding: 0 .3rem; border-radius: 4px; color: #1A0F0C; background: #FFC233; animation: wh-blink2 1s steps(1) infinite; }
.wh-gap.ok { background: var(--ok); animation: none; }
@keyframes wh-blink2 { 50% { opacity: .5; } }
.wh-tip { margin: 0; color: #FFD9C7; font-size: .92rem; }
.wh-form-in { display: flex; gap: .5rem; flex-wrap: wrap; }
.wh-in { flex: 1 1 180px; min-width: 0; padding: .8rem 1rem; border-radius: 12px; font: 700 1.05rem 'Space Mono', monospace; color: #fff; background: rgba(255,255,255,.06); border: 2px solid rgba(255, 122, 77, .45); outline: none; }
.wh-in:focus { border-color: #FFC233; }

/* CSS: szary świat */
.esc.esc-wc { --c1: #4FB3F0; --c2: #B49CFF; --ok: #3DDC84; --warn: #FF7EB6; --line: rgba(79, 179, 240, .25); background: radial-gradient(120% 90% at 50% -10%, #17243D 0%, #0D1424 50%, #070A12 100%); }
.esc-wc .esc-btn { color: #06101F; }
.esc-wc .esc-term { color: #A8D8FF; border-color: rgba(79, 179, 240, .3); }
.esc-wc .esc-term .cur { background: #A8D8FF; }
.wc-site { --wcp: #8C929C; position: relative; width: 100%; max-width: 300px; padding: 6px; border-radius: 10px; overflow: hidden; font-family: 'Times New Roman', serif; color: #333;
  background: #C9CCD1; filter: grayscale(1); transition: filter .6s; }
.wc-s-head { display: flex; justify-content: space-between; align-items: center; padding: 4px; font-size: 10px; transition: all .5s; }
.wc-s-nav { display: flex; gap: 4px; }
.wc-s-nav i { font-style: normal; text-decoration: underline; font-size: 8px; transition: all .5s; }
.wc-s-hero { display: flex; gap: 6px; align-items: center; padding: 6px 4px; margin: 3px 0; transition: all .5s; }
.wc-s-av { flex: none; width: 34px; height: 34px; background: #999; transition: all .5s; }
.wc-s-hero > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wc-s-h1 { font-size: 12px; transition: all .5s; }
.wc-s-line { display: block; height: 4px; background: #999; }
.wc-s-line.short { width: 60%; }
.wc-s-btn { align-self: flex-start; padding: 1px 5px; font-size: 8px; border: 1px solid #777; background: #DDD; transition: all .5s; }
.wc-s-cards { display: block; padding: 2px 4px; transition: all .5s; }
.wc-s-cards span { display: block; height: 16px; margin: 3px 0; background: #AAA; transition: all .5s; }
.wc-s-foot { padding: 3px 4px; font-size: 8px; transition: all .5s; }
.wc-s-state { margin: 4px -6px -6px; padding: 3px 8px; font: 700 8px 'Space Mono', monospace; letter-spacing: 1px; color: #fff; background: #555; }
.wc-site.on0 { filter: none; background: linear-gradient(160deg, #EEF4FF, #F6EEFF); }
.wc-site.on1 .wc-s-h1 { color: #4F46E5; font: 700 13px 'Space Grotesk', sans-serif; }
.wc-site.on1 .wc-s-head b { color: #4F46E5; font-family: 'Space Grotesk', sans-serif; }
.wc-site.on2 .wc-s-nav i { padding: 1px 5px; border-radius: 99px; color: #fff; background: #6366F1; text-decoration: none; }
.wc-site.on3 .wc-s-hero, .wc-site.on3 .wc-s-cards span { border-radius: 10px; }
.wc-site.on3 .wc-s-hero { background: #fff; }
.wc-site.on4 .wc-s-hero, .wc-site.on4 .wc-s-cards span { box-shadow: 0 4px 10px rgba(79, 70, 229, .25); }
.wc-site.on5 .wc-s-btn { border: 0; border-radius: 99px; color: #fff; background: linear-gradient(90deg, #EC4899, #8B5CF6); padding: 2px 8px; }
.wc-site.on6 .wc-s-cards { display: flex; gap: 4px; }
.wc-site.on6 .wc-s-cards span { flex: 1; height: 26px; }
.wc-site.on6 .wc-s-cards span:nth-child(1) { background: #A5B4FC; } .wc-site.on6 .wc-s-cards span:nth-child(2) { background: #F9A8D4; } .wc-site.on6 .wc-s-cards span:nth-child(3) { background: #93C5FD; }
.wc-site.on7 .wc-s-av { border-radius: 50%; background: linear-gradient(135deg, #F59E0B, #EC4899); }
.wc-site.on8 .wc-s-hero { padding: 10px 8px; margin: 6px 0; }
.wc-site.on8 .wc-s-head { padding: 6px; }
.wc-site.on8 .wc-s-line { background: #C7D2FE; border-radius: 2px; }
.wc-site.on9 .wc-s-foot { color: #E0E7FF; background: #1E1B4B; border-radius: 6px; font-family: 'Inter', sans-serif; }
.esc-rig.is-err .wc-site { filter: grayscale(1) contrast(1.2); }
.wc-gray-dead { filter: grayscale(1); }
.wc-glitch { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 700 18px 'Space Mono', monospace; color: #fff; background: rgba(40, 40, 40, .6); animation: wc-glitch 1.2s steps(2) infinite; }
@keyframes wc-glitch { 50% { transform: translate(2px, -1px); opacity: .85; } }
.wc-fin { display: flex; flex-direction: column; gap: .5rem; }
.wc-fin-stage { position: relative; height: 150px; border-radius: 12px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 25px), repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 25px), rgba(0,0,0,.35); border: 1px solid rgba(79, 179, 240, .35); }
.wc-fin-stage.ok { border-color: var(--ok); box-shadow: 0 0 24px -6px var(--ok); }
.wc-fin-layer { position: absolute; inset: 8px; display: flex; }
.wc-fin-door { width: 46px; height: 62px; display: grid; place-items: center; border-radius: 8px 8px 2px 2px; font-size: 1.3rem; color: #2A0F05; background: linear-gradient(135deg, #FFB347, #FF7A4D); box-shadow: 0 6px 16px -6px rgba(0,0,0,.6); }
.wc-fin-door.ghost { background: transparent; border: 2px dashed #B49CFF; box-shadow: none; animation: wh-blink2 1.2s steps(1) infinite; }
.wc-fin-g { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.wc-fin-g code { min-width: 9.5rem; font: 700 .85rem 'Space Mono', monospace; color: #A8D8FF; }
.wc-fin-b { padding: .4rem .7rem; border-radius: 8px; cursor: pointer; font: 700 .82rem 'Space Mono', monospace; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); }
.wc-fin-b[aria-pressed="true"] { color: #06101F; background: var(--c1); border-color: var(--c1); }
.wc-fin-b:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wc-fin-code { margin: 0; padding: .5rem .8rem; border-radius: 10px; font: .8rem/1.5 'Space Mono', monospace; color: #CFE6FF; background: rgba(0,0,0,.4); }

/* JS: robot */
.esc.esc-wj { --c1: #F7DF1E; --c2: #3DDC84; --ok: #3DDC84; --line: rgba(247, 223, 30, .22); background: radial-gradient(120% 90% at 50% -10%, #2B2A12 0%, #14140B 50%, #080805 100%); }
.esc-wj .esc-btn { color: #1A1A1A; }
.esc-wj .esc-term { color: #F7DF1E; border-color: rgba(247, 223, 30, .3); }
.esc-wj .esc-term .cur { background: #F7DF1E; }
.esc-wj .wj-term { fill: #0B0B06; stroke: #3A3A20; }
.esc-wj .wj-term-txt { font: 700 9px 'Space Mono', monospace; letter-spacing: .5px; fill: #F7DF1E; }
.esc-wj .wj-head { fill: #3A3D46; stroke: #5B606E; stroke-width: 2; }
.esc-wj .wj-face { fill: #0D1117; }
.esc-wj .wj-eye { fill: #4B5563; transition: fill .4s; }
.esc-wj .wj-mouth { stroke: #4B5563; stroke-width: 3; stroke-linecap: round; transition: stroke .4s; }
.esc-wj .wj-ear, .esc-wj .wj-body { fill: #2E3138; stroke: #5B606E; stroke-width: 1.5; }
.esc-wj .wj-js { font: 700 11px 'Space Grotesk', sans-serif; fill: #F7DF1E; }
.esc-wj .wj-ant { stroke: #5B606E; stroke-width: 2; }
.esc-wj .wj-ant-b { fill: #6B7280; }
.esc-wj .wj-bat { fill: #111; stroke: #6B7280; stroke-width: 2; }
.esc-wj .wj-cell { fill: #1F2937; transition: fill .3s; }
.esc-wj .wj-cell.on { fill: #F7DF1E; }
.esc-wj .wj-cell.on[data-cell="8"], .esc-wj .wj-cell.on[data-cell="9"] { fill: #3DDC84; }
.esc-wj .wj-pct { font: 700 10px 'Space Mono', monospace; fill: #F7DF1E; }
.esc-wj .wj-awake .wj-eye { fill: #3DDC84; filter: drop-shadow(0 0 4px #3DDC84); }
.esc-wj .wj-awake .wj-mouth { stroke: #3DDC84; }
.esc-wj .wj-awake .wj-ant-b { fill: #F7DF1E; animation: wj-ant 1s steps(1) infinite; }
@keyframes wj-ant { 50% { opacity: .3; } }
.esc-wj .wj-robot { transform-box: fill-box; transform-origin: center bottom; }
.esc-wj .wj-robot.jolt { animation: wj-jolt .45s ease; }
@keyframes wj-jolt { 30% { transform: translateY(-4px); } 60% { transform: translateY(1px); } }
.esc-wj .esc-rig.is-err .wj-eye { fill: var(--bad); }
.esc-wj .esc-rig.is-err .wj-robot { animation: wh-err .5s; }
.esc-wj .wj-robot.dead .wj-eye { fill: var(--bad); }
.esc-wj .wj-robot.dead { transform: rotate(-12deg) translateY(6px); transform-box: fill-box; transform-origin: center bottom; }
.wj-fin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.wj-maze { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); aspect-ratio: 1; max-width: 260px; width: 100%; border-radius: 10px; overflow: hidden; border: 2px solid rgba(247, 223, 30, .4); background: #1A1C14; }
.wj-m { display: grid; place-items: center; border: 1px solid rgba(255,255,255,.05); }
.wj-m.wall { background: repeating-linear-gradient(45deg, #2B2E36 0 5px, #23262D 5px 10px); }
.wj-m.exit { color: #3DDC84; font-size: 1.3rem; background: rgba(61, 220, 132, .14); }
.wj-bot { position: absolute; top: 0; left: 0; width: 20%; height: 20%; display: grid; place-items: center; font-size: 1.4rem; color: #F7DF1E; transition: transform .3s ease; filter: drop-shadow(0 0 6px #F7DF1E); }
.wj-bot.crash { animation: wj-crash .5s; color: var(--bad); }
@keyframes wj-crash { 25%, 75% { opacity: .2; } 50% { opacity: 1; } }
.wj-cmds { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.wj-cmd { display: flex; align-items: center; gap: .4rem; padding: .5rem; border-radius: 10px; cursor: pointer; font: 700 .78rem 'Space Mono', monospace; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); }
.wj-cmd span { font-size: 1.05rem; color: var(--c1); }
.wj-cmd:hover:not(:disabled) { border-color: var(--c1); background: rgba(247, 223, 30, .1); }
.wj-cmd:disabled { opacity: .4; cursor: default; }
.wj-cmd:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.wj-prog { margin: .5rem 0 0; padding: .4rem .4rem .4rem 2.2rem; max-height: 170px; overflow: auto; border-radius: 10px; font: .8rem/1.6 'Space Mono', monospace; color: #E8E6C8; background: rgba(0,0,0,.45); border: 1px solid rgba(247, 223, 30, .25); }
.wj-prog li.cur { color: #F7DF1E; font-weight: 700; }
.wj-prog .wj-empty { list-style: none; margin-left: -1.8rem; color: var(--dim); }

/* Projekt: rakieta */
.esc.esc-wp { --c1: #34D399; --c2: #60A5FA; --ok: #34D399; --warn: #FBBF24; --line: rgba(52, 211, 153, .25); background: radial-gradient(120% 90% at 50% -10%, #0F2E33 0%, #0A1A22 50%, #05080D 100%); }
.esc-wp .esc-btn { color: #04231A; }
.esc-wp .esc-term { color: #6EE7B7; border-color: rgba(52, 211, 153, .3); }
.esc-wp .esc-term .cur { background: #6EE7B7; }
.esc-wp .wp-l circle { fill: #1F2937; stroke: #374151; stroke-width: 1.5; transition: fill .3s; }
.esc-wp .wp-l text { font: 700 8px 'Space Mono', monospace; fill: #6B7280; transition: fill .3s; }
.esc-wp .wp-l.on circle { fill: #34D399; filter: drop-shadow(0 0 3px #34D399); }
.esc-wp .wp-l.on text { fill: #D1FAE5; }
.esc-wp .wp-board { fill: #05080D; stroke: #1F3A3A; }
.esc-wp .wp-count { font: 700 15px 'Space Mono', monospace; fill: #FBBF24; letter-spacing: 2px; }
.esc-wp .wp-tower rect { fill: #374151; } .esc-wp .wp-tower path { stroke: #4B5563; stroke-width: 3; }
.esc-wp .wp-body { fill: #E5E7EB; stroke: #9CA3AF; stroke-width: 1.5; }
.esc-wp .wp-win { fill: #60A5FA; stroke: #1E3A8A; stroke-width: 2; }
.esc-wp .wp-fin { fill: #10B981; }
.esc-wp .wp-noz { fill: #6B7280; }
.esc-wp .wp-www { font: 700 8px 'Space Mono', monospace; fill: #1D4ED8; }
.esc-wp .wp-flame { fill: #FBBF24; opacity: 0; transform-box: fill-box; transform-origin: center top; }
.esc-wp .wp-pad { fill: #4B5563; }
.esc-wp .wp-state { font: 700 8px 'Space Mono', monospace; letter-spacing: 1px; fill: #6EE7B7; }
.esc-wp .wp-rocket { transform-box: fill-box; transform-origin: center bottom; }
.esc-wp .wp-rocket.rumble { animation: wp-rumble .5s linear; }
.esc-wp .wp-rocket.rumble .wp-flame { opacity: .7; }
@keyframes wp-rumble { 20% { transform: translateX(-1.5px); } 40% { transform: translateX(1.5px); } 60% { transform: translateX(-1px); } 80% { transform: translateX(1px); } }
.esc-wp .wp-rocket.launch { animation: wp-launch 1.4s cubic-bezier(.6, 0, .9, .4) forwards; }
.esc-wp .wp-rocket.launch .wp-flame { opacity: 1; animation: wp-flame .15s linear infinite alternate; }
@keyframes wp-launch { 0% { transform: translateY(0); } 20% { transform: translateY(3px); } 100% { transform: translateY(-260px); } }
@keyframes wp-flame { to { transform: scaleY(1.4); } }
.esc-wp .wp-rocket.dead { transform: rotate(8deg) translate(6px, 4px); }
.esc-wp .esc-rig.is-err .wp-count { fill: var(--bad); }
.esc-wp .esc-rig.is-err .wp-rocket { animation: wh-err .5s; }
.esc-wp .wp-url-done { font: 700 1.05rem 'Space Mono', monospace; color: #6EE7B7; overflow-wrap: anywhere; }
.wp-fin { display: flex; flex-direction: column; gap: .6rem; }
.wp-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-height: 52px; padding: .6rem .8rem; border-radius: 12px; font: 700 1rem 'Space Mono', monospace; background: rgba(0,0,0,.4); border: 2px dashed rgba(52, 211, 153, .4); overflow-wrap: anywhere; }
.wp-addr > i { color: #34D399; margin-right: .4rem; }
.wp-addr.ok { border-style: solid; border-color: var(--ok); box-shadow: 0 0 22px -6px var(--ok); }
.wp-seg { color: #fff; }
.wp-ph { color: var(--dim); font: .88rem 'Inter', sans-serif; }
.wp-pool { display: flex; flex-wrap: wrap; gap: .4rem; }
.wp-part { padding: .5rem .8rem; border-radius: 10px; cursor: pointer; font: 700 .95rem 'Space Mono', monospace; color: var(--ink); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); transition: transform .15s, opacity .2s; }
.wp-part:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--c1); background: rgba(52, 211, 153, .12); }
.wp-part:disabled { opacity: .25; cursor: default; }
.wp-part:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 860px) {
  .esc-play .esc-rig .wh-br, .esc-play .esc-rig .wc-site { max-width: 220px; }
  .wj-fin { grid-template-columns: minmax(0, 1fr); }
  .wj-maze { margin: 0 auto; max-width: 240px; }
}
@media (max-width: 560px) {
  .esc-play .esc-rig .wh-br, .esc-play .esc-rig .wc-site { max-width: 160px; }
  .wc-fin-g code { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .www-fc-in, .www-xp-bar span, .wj-bot { transition: none; }
  .www-cele, .www-xp.gain { animation: none; }
}

/* ── Kółko na mapie (ev-kompendium.js): tekst zawsze w środku koła ── */
.tl3d-core b, .tl3d-core small { max-width: 80%; text-align: center; overflow-wrap: anywhere; }
.tl3d-core small { line-height: 1.25; }
.tl3d-core.ev-core-long b { font-size: 1.25rem; }
@media (min-width: 1280px) and (max-height: 900px) { .tl3d-core.ev-core-long b { font-size: 1.05rem; } .tl3d-core small { font-size: .7rem; } }

/* ════════ PHP (.ev-wy, .esc-wy) i Bazy danych (.ev-wd, .esc-wd) – od 2026-10-24 ════════ */
.ev-wy .tl3d-core, body:not(.light) .ev-wy .tl3d-core, .ev-wy .tl3d-kicker, body:not(.light) .ev-wy .tl3d-kicker { background: linear-gradient(135deg, #777BB4, #4F5B93); }
.ev-wd .tl3d-core, body:not(.light) .ev-wd .tl3d-core, .ev-wd .tl3d-kicker, body:not(.light) .ev-wd .tl3d-kicker { background: linear-gradient(135deg, #0F9488, #6D28D9); }
.ev-wy .tl3d-core { box-shadow: 0 0 0 10px rgba(119, 123, 180, .12), 0 24px 60px -20px rgba(119, 123, 180, .55); }
.ev-wd .tl3d-core { box-shadow: 0 0 0 10px rgba(15, 148, 136, .12), 0 24px 60px -20px rgba(15, 148, 136, .55); }
@media (min-width: 1280px) and (max-height: 900px) { .ev-wy .tl3d-core, .ev-wd .tl3d-core { box-shadow: none; } }
.www-lab.ev-wy { --acc: #777BB4; } .www-lab.ev-wd { --acc: #0F8A80; }
body:not(.light) .www-lab.ev-wy { --acc: #A5A9DA; } body:not(.light) .www-lab.ev-wd { --acc: #2DD4BF; }
body:not(.light) .www-lab.ev-wd .www-btn:not(.ghost):not(.good), body:not(.light) .www-lab.ev-wd .www-lab-tab[aria-selected="true"], body:not(.light) .www-lab.ev-wd .www-xp-badge { color: #04201D; }
.tl-escape.ev-wy::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #777BB4 14%, var(--bg)), var(--bg) 70%); }
.tl-escape.ev-wd::before { background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, #0F9488 14%, var(--bg)), var(--bg) 70%); }

/* przykłady w kompendium: kod + wynik */
.py-run, .sq-ex { display: grid; gap: .35rem; }
.py-console { color: #D1FAE5; background: #0B1220; }
body.light .py-console { color: #064E3B; background: #ECFDF5; }

/* ── Konsola i misje SQL ── */
.sq-con, .sq-ms-work { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 1rem; align-items: start; }
.sq-ms-work { margin-top: .8rem; }
.sq-ta, .wd-ta { width: 100%; min-height: 120px; padding: .8rem 1rem; border-radius: 12px; resize: vertical; font: .95rem/1.55 'Space Mono', monospace; color: var(--text); background: var(--bg); border: 2px solid var(--border); outline: none; tab-size: 2; }
.sq-ta:focus { border-color: var(--acc); }
.sq-kbd { margin-left: auto; font: .72rem 'Space Mono', monospace; color: var(--muted); }
.sq-out { margin-top: .8rem; }
.sq-side { padding: .8rem; border-radius: 14px; background: color-mix(in srgb, var(--acc) 6%, var(--bg)); border: 1px solid var(--border); }
.sq-side-h { margin: 0 0 .5rem; font: 700 .85rem 'Space Grotesk', sans-serif; }
.sq-side-note { margin: .6rem 0 0; font-size: .72rem; color: var(--muted); }
.sq-schema { display: grid; gap: .5rem; }
.sq-tab ul { list-style: none; margin: .2rem 0 0; padding: 0 0 0 .4rem; font: .78rem/1.6 'Space Mono', monospace; color: var(--muted); }
.sq-tab ul i { font-size: .7rem; color: var(--acc); }
.sq-tab-name { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .5rem; border-radius: 8px; cursor: pointer; font: 700 .85rem 'Space Mono', monospace; color: var(--text); background: var(--bg2); border: 1px solid var(--border); }
.sq-tab-name:hover { border-color: var(--acc); }
.sq-tab-name small { font-weight: 400; color: var(--muted); }
.sq-res { max-width: 100%; overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.sq-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sq-table th, .sq-table td { padding: .4rem .65rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sq-table th { font: 700 .78rem 'Space Mono', monospace; color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--bg)); }
.sq-table tbody tr:last-child td { border-bottom: 0; }
.sq-null { font: italic .78rem 'Space Mono', monospace; color: var(--muted); }
.sq-empty { text-align: center !important; color: var(--muted); font-style: italic; }
.sq-count { margin: .3rem 0 .8rem; font-size: .75rem; color: var(--muted); }
.sq-msg, .sq-ok, .sq-err { margin: 0 0 .6rem; padding: .55rem .8rem; border-radius: 10px; font-size: .9rem; }
.sq-msg { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.sq-msg.warn { color: #9A3412; background: #FFEDD5; }
.sq-ok { color: #14532D; background: #DCFCE7; font-weight: 700; }
.sq-err { color: #7F1D1D; background: #FEE2E2; }
body:not(.light) .sq-msg.warn { color: #FED7AA; background: rgba(234, 88, 12, .18); }
body:not(.light) .sq-ok { color: #BBF7D0; background: rgba(22, 163, 74, .18); }
body:not(.light) .sq-err { color: #FECACA; background: rgba(220, 38, 38, .18); }

/* ── Zadania „co wypisze program” (PHP) ── */
.py-code { margin: 0; padding: .8rem 1rem; border-radius: 12px; overflow-x: auto; font: .9rem/1.6 'Space Mono', monospace; color: #E2E8F0; background: #0F172A; white-space: pre; }
.py-gap { padding: 0 .3rem; border-radius: 4px; color: #0F172A; background: #FFD43B; }
.py-task { display: grid; gap: .5rem; margin-top: .8rem; }
.py-lab { font-size: .85rem; font-weight: 600; color: var(--muted); }
.py-in { width: 100%; padding: .7rem .9rem; border-radius: 12px; font: .95rem/1.5 'Space Mono', monospace; color: var(--text); background: var(--bg); border: 2px solid var(--border); outline: none; }
.py-in:focus { border-color: var(--acc); }
.py-in.shake { animation: www-shake .4s; }
.py-out { resize: vertical; }
.py-pick { display: grid; gap: .45rem; }
.py-opt { display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 12px; cursor: pointer; text-align: left; font: 600 .92rem 'Inter', sans-serif; color: var(--text); background: var(--bg); border: 1px solid var(--border); transition: border-color .2s, background-color .2s; }
.py-opt:hover:not(:disabled) { border-color: var(--acc); }
.py-opt .k { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; font: 700 .78rem 'Space Mono', monospace; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.py-opt.ok { border-color: #16A34A; background: color-mix(in srgb, #16A34A 12%, transparent); }
.py-opt.bad { border-color: #DC2626; opacity: .6; }
.py-fb p { margin: .6rem 0 0; padding: .6rem .8rem; border-radius: 10px; font-size: .9rem; background: color-mix(in srgb, var(--acc) 8%, transparent); }
.py-fb.ok p { color: #14532D; background: #DCFCE7; } .py-fb.bad p { color: #7F1D1D; background: #FEE2E2; }
body:not(.light) .py-fb.ok p { color: #BBF7D0; background: rgba(22, 163, 74, .18); } body:not(.light) .py-fb.bad p { color: #FECACA; background: rgba(220, 38, 38, .18); }

/* ── Symulator API ── */
.py-api { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.py-api-h { margin: 0 0 .5rem; font: 700 .9rem 'Space Grotesk', sans-serif; }
.py-api-h small { font-weight: 400; color: var(--muted); }
.py-app { max-height: 560px; overflow: auto; padding: .6rem 0; white-space: normal; }
.py-ln { display: block; padding: 0 .9rem 0 0; white-space: pre; transition: background-color .3s; }
.py-ln i { display: inline-block; width: 2.6em; margin-right: .6rem; text-align: right; font-style: normal; color: #64748B; user-select: none; }
.py-ln.hl { background: rgba(255, 212, 59, .16); box-shadow: inset 3px 0 0 #FFD43B; }
.py-req { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.py-method, .py-path { padding: .55rem .7rem; border-radius: 10px; font: 700 .9rem 'Space Mono', monospace; color: var(--text); background: var(--bg); border: 2px solid var(--border); }
.py-path { flex: 1 1 160px; min-width: 0; }
.py-method:focus, .py-path:focus { outline: none; border-color: var(--acc); }
.py-host { font: .8rem 'Space Mono', monospace; color: var(--muted); }
.py-body { display: grid; gap: .3rem; margin-top: .5rem; font-size: .82rem; color: var(--muted); }
.py-body[hidden] { display: none; }
.py-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.py-presets .tl3d-chip { font-family: 'Space Mono', monospace; font-size: .74rem; }
.py-resp { display: grid; gap: .6rem; margin-top: .8rem; }
.py-rr-h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font: 700 .8rem 'Space Grotesk', sans-serif; }
.py-raw { margin: 0; padding: .6rem .8rem; border-radius: 10px; overflow-x: auto; font: .8rem/1.5 'Space Mono', monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); background: var(--bg); border: 1px solid var(--border); }
.py-st { padding: .15rem .5rem; border-radius: 99px; font: 700 .74rem 'Space Mono', monospace; color: #fff; background: #64748B; }
.py-st.s2 { background: #16A34A; } .py-st.s4 { background: #EA580C; } .py-st.s5 { background: #DC2626; }
.py-note { margin: 0; font-size: .88rem; }
.py-note code { font-size: .82rem; }
.py-fetch summary { cursor: pointer; font-weight: 700; font-size: .88rem; }
.py-fetch .py-code { margin-top: .4rem; }

@media (max-width: 860px) {
  .sq-con, .sq-ms-work, .py-api { grid-template-columns: minmax(0, 1fr); }
  .sq-side { order: -1; }
  .sq-schema { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .py-app { max-height: 320px; }
}

/* ── Wspólne dla escape roomów PHP i Bazy danych ── */
.esc.esc-wy, .esc.esc-wd { border-color: color-mix(in srgb, var(--c1) 35%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c2) 15%, transparent) inset, 0 30px 80px -30px color-mix(in srgb, var(--c1) 40%, transparent), 0 0 60px -20px color-mix(in srgb, var(--c2) 40%, transparent); }
.esc-wy .esc-grid, .esc-wd .esc-grid { background-image: linear-gradient(color-mix(in srgb, var(--c1) 35%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--c2) 35%, transparent) 1px, transparent 1px); }
.esc-wy .esc-btn, .esc-wd .esc-btn { background: linear-gradient(90deg, var(--c1), color-mix(in srgb, var(--c1) 50%, #fff) 45%, var(--c2)); box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 34px -8px color-mix(in srgb, var(--c1) 70%, transparent); }
.esc-wy .esc-btn.pulse, .esc-wd .esc-btn.pulse { animation-name: ww-pulse; }
.esc-wy .esc-ans .k, .esc-wd .esc-ans .k { background: color-mix(in srgb, var(--c1) 12%, transparent); border-color: color-mix(in srgb, var(--c1) 35%, transparent); }
.esc-wy .esc-ans:hover:not(:disabled), .esc-wd .esc-ans:hover:not(:disabled), .esc-wy .esc-ghost:hover, .esc-wd .esc-ghost:hover { background: color-mix(in srgb, var(--c1) 12%, transparent); }
.esc-wy .esc-title, .esc-wd .esc-title { text-shadow: 0 0 30px color-mix(in srgb, var(--c1) 30%, transparent); }
.esc-wy .esc-rules i, .esc-wd .esc-rules i { background: color-mix(in srgb, var(--c1) 14%, transparent); }
.esc-wy .esc-life, .esc-wd .esc-life { color: var(--warn); }
.esc-wy .esc-door, .esc-wd .esc-door { background: radial-gradient(60% 60% at 50% 50%, #fff, color-mix(in srgb, var(--c1) 40%, #fff) 25%, color-mix(in srgb, var(--c1) 35%, transparent) 55%, transparent 75%), #07090F; }
.esc-wy .esc-door .fly, .esc-wd .esc-door .fly { width: 46%; filter: drop-shadow(0 0 14px var(--c1)); }
.esc-wy .esc-tile b, .esc-wd .esc-tile b { color: var(--c1); }
.esc-wy-dlg .esc-dlg-box, .esc-wd-dlg .esc-dlg-box { border-color: rgba(255,255,255,.2); }

/* PHP: serwerownia */
.esc.esc-wy { --c1: #5BA3E0; --c2: #FFD43B; --ok: #3DDC84; --warn: #FFD43B; --line: rgba(91, 163, 224, .25); background: radial-gradient(120% 90% at 50% -10%, #12284A 0%, #0A1628 50%, #050B15 100%); }
.esc-wy .esc-btn { color: #061426; }
.esc-wy .esc-term { color: #9CC9F0; border-color: rgba(91, 163, 224, .3); }
.esc-wy .esc-term .cur { background: #9CC9F0; }
.wy-rack { width: 100%; max-width: 280px; padding: 8px; border-radius: 12px; background: linear-gradient(180deg, #1E293B, #0F172A); border: 2px solid #334155; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); font-family: 'Space Mono', monospace; }
.wy-rack-top { display: flex; align-items: center; gap: 4px; padding: 2px 4px 6px; font-size: 9px; color: #94A3B8; }
.wy-rack-top span { width: 6px; height: 6px; border-radius: 50%; background: #475569; }
.wy-rack-top b { margin-left: auto; font-weight: 700; }
.wy-u { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-top: 3px; padding: 3px 6px; border-radius: 4px; font-size: 9px; color: #64748B; background: #111827; border: 1px solid #1F2937; transition: border-color .3s, color .3s; }
.wy-u i { width: 7px; height: 7px; border-radius: 50%; background: #DC2626; box-shadow: 0 0 6px rgba(220, 38, 38, .7); }
.wy-u em { font-style: normal; font-weight: 700; color: #F87171; }
.wy-u.cur { border-color: #FFD43B; animation: wh-blink 1s steps(1) infinite; }
.wy-u.on { color: #E2E8F0; border-color: rgba(61, 220, 132, .45); }
.wy-u.on i { background: #3DDC84; box-shadow: 0 0 8px #3DDC84; animation: wy-led 1.6s ease-in-out infinite; }
.wy-u.on em { color: #3DDC84; }
@keyframes wy-led { 50% { opacity: .55; } }
.wy-status { margin-top: 6px; padding: 4px 6px; border-radius: 4px; font-size: 8px; font-weight: 700; letter-spacing: 1px; color: #9CC9F0; background: #050B15; }
.esc-rig.is-err .wy-status { color: var(--bad); }
.esc-rig.is-err .wy-rack { animation: wh-err .5s; }
.wy-500 { display: grid; place-items: center; gap: 4px; min-height: 150px; text-align: center; }
.wy-500 b { font: 700 42px 'Space Grotesk', sans-serif; color: #F87171; }
.wy-500 span { font-size: 11px; color: #94A3B8; }
.esc-play .esc-rig .wy-rack { max-width: 280px; }
.wy-fix .wh-code { color: #DBEAFE; border-color: rgba(91, 163, 224, .4); }
.wy-fix .wh-tip { color: #BFDBFE; }
.wy-fix .wh-in { border-color: rgba(91, 163, 224, .5); }
.wy-fix .wh-in:focus { border-color: #FFD43B; }

/* Bazy danych: tablica dowodów */
.esc.esc-wd { --c1: #2DD4BF; --c2: #A78BFA; --ok: #3DDC84; --warn: #FACC15; --line: rgba(45, 212, 191, .25); background: radial-gradient(120% 90% at 50% -10%, #0F2F33 0%, #0B1A20 50%, #050C10 100%); }
.esc-wd .esc-btn { color: #03201C; }
.esc-wd .esc-term { color: #99F6E4; border-color: rgba(45, 212, 191, .3); }
.esc-wd .esc-term .cur { background: #99F6E4; }
.wd-board { width: 100%; max-width: 280px; padding: 10px; border-radius: 12px; background: #3B2A1E; border: 6px solid #5B3E2A; box-shadow: inset 0 0 20px rgba(0,0,0,.45), 0 10px 30px -10px rgba(0,0,0,.6); }
.wd-board-h { margin-bottom: 8px; text-align: center; font: 700 9px 'Space Mono', monospace; letter-spacing: 2px; color: #F5E6D3; }
.wd-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wd-ev { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border-radius: 3px; background: rgba(245, 230, 211, .12); border: 1px dashed rgba(245, 230, 211, .35); transform: rotate(-2deg); transition: background-color .3s, transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.wd-ev:nth-child(even) { transform: rotate(2deg); }
.wd-ev b { font-size: 18px; opacity: 0; transition: opacity .3s; }
.wd-ev i { position: absolute; bottom: 1px; right: 3px; font: 700 7px 'Space Mono', monospace; font-style: normal; color: rgba(245, 230, 211, .6); }
.wd-ev.cur { border-color: #FACC15; border-style: solid; animation: wh-blink 1s steps(1) infinite; }
.wd-ev.on { background: #FFFBEB; border: 1px solid #FFFBEB; transform: rotate(0) scale(1.04); box-shadow: 0 3px 6px rgba(0,0,0,.4); }
.wd-ev.on b { opacity: 1; }
.wd-ev.on i { color: #92400E; }
.wd-ev.on::before { content: ''; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #DC2626; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.wd-status { margin-top: 8px; padding: 4px 6px; border-radius: 4px; text-align: center; font: 700 8px 'Space Mono', monospace; letter-spacing: 1px; color: #99F6E4; background: #050C10; }
.esc-rig.is-err .wd-status { color: var(--bad); }
.esc-rig.is-err .wd-board { animation: wh-err .5s; }
.wd-gone { display: grid; place-items: center; gap: 6px; min-height: 140px; font-size: 34px; text-align: center; }
.wd-gone span { font: 11px 'Inter', sans-serif; color: #F5E6D3; }
.esc-play .esc-rig .wd-board { max-width: 280px; }
.wd-fin { display: flex; flex-direction: column; gap: .6rem; }
.wd-clues { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.wd-clues li { padding: .5rem .7rem; border-radius: 10px; font-size: .92rem; color: #E6FFFB; background: rgba(45, 212, 191, .08); border: 1px solid rgba(45, 212, 191, .25); }
.wd-clues code { margin-left: .3rem; padding: .05rem .35rem; border-radius: 5px; font: .8rem 'Space Mono', monospace; color: #99F6E4; background: rgba(0,0,0,.35); }
.wd-peek summary { cursor: pointer; font-size: .88rem; color: #CCFBF1; }
.wd-peek .sq-res, .wd-out .sq-res { margin-top: .4rem; border-color: rgba(45, 212, 191, .25); }
.wd-peek .sq-table th, .wd-out .sq-table th { color: #99F6E4; background: rgba(45, 212, 191, .1); }
.wd-peek .sq-table td, .wd-out .sq-table td { color: #E6FFFB; border-color: rgba(255,255,255,.08); }
.wd-peek .sq-count, .wd-out .sq-count { color: #94A3B8; }
.wd-form { display: flex; flex-direction: column; gap: .5rem; }
.wd-ta { min-height: 90px; color: #fff; background: rgba(255,255,255,.06); border-color: rgba(45, 212, 191, .45); }
.wd-ta:focus { border-color: #FACC15; }
.wd-ta.shake { animation: www-shake .4s; }
.wd-out .sq-err { color: #FECACA; background: rgba(220, 38, 38, .18); }
.wd-out .sq-ok { color: #BBF7D0; background: rgba(22, 163, 74, .18); }
@media (prefers-reduced-motion: reduce) { .wy-u.cur, .wy-u.on i, .wd-ev.cur { animation: none; } }

/* Projekt → „Wszystko razem”: pliki księgi gości + ZIP (www-ksiega.js) */
.ww-stack-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.ww-stack-tabs .tl3d-chip { font-family: 'Space Mono', monospace; font-size: .74rem; }
.ww-stack-tabs .tl3d-chip[aria-selected="true"] { color: #fff; background: #059669; border-color: #059669; }
.ww-stack-code { max-height: 380px; overflow: auto; }
.ww-stack-dl { margin-top: .6rem; font-weight: 700; }
/* Detektyw SQL: tabela podejrzanych mieści się na telefonie bez przewijania w bok */
@media (max-width: 600px) { .wd-peek .sq-table, .wd-out .sq-table { font-size: .74rem; } .wd-peek .sq-table th, .wd-peek .sq-table td, .wd-out .sq-table th, .wd-out .sq-table td { padding: .3rem .35rem; white-space: normal; } }
/* Wąski telefon: tabela podejrzanych w finale Bazy danych mieści się bez przewijania w bok */
@media (max-width: 420px) { .wd-peek .sq-table, .wd-out .sq-table { font-size: .64rem; } .wd-peek .sq-table th, .wd-peek .sq-table td, .wd-out .sq-table th, .wd-out .sq-table td { padding: .25rem .18rem; overflow-wrap: anywhere; } }

/* ════════ Projekt → „Gotowe strony” (www-strony.js) – od 2026-10-26 ════════ */
.wst { --l1: #E34F26; --l2: #C9A400; --l3: #777BB4; }
body:not(.light) .wst { --l2: #F7DF1E; --l3: #9EA3E0; }
.wst-intro { margin: 0 0 1rem; color: var(--muted); }
.wst-intro i { color: var(--acc, var(--blue)); }
.wst-lvl { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .6rem; font: 700 1rem 'Space Grotesk', sans-serif; color: var(--text); }
.wst-lvl i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--lc); font-size: .85rem; }
.wst-l1 { --lc: var(--l1); } .wst-l2 { --lc: var(--l2); } .wst-l3 { --lc: var(--l3); }
body:not(.light) .wst-lvl.wst-l2 i { color: #1A1A1A; }
.wst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.wst-card { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .7rem; row-gap: .2rem; align-items: start; text-align: left;
  padding: .8rem .9rem; border-radius: 16px; cursor: pointer; font: inherit; color: var(--text); background: var(--glass); border: 1px solid var(--border);
  border-top: 3px solid var(--lc); transition: transform .2s, border-color .2s, box-shadow .2s; }
.wst-card:hover { transform: translateY(-2px); border-color: var(--lc); }
.wst-card[aria-pressed="true"] { border-color: var(--lc); box-shadow: 0 10px 26px -16px var(--lc), inset 0 0 0 1px var(--lc); }
.wst-card:focus-visible { outline: 3px solid var(--lc); outline-offset: 2px; }
.wst-card .wst-emo { grid-row: 1 / 4; font-size: 1.9rem; line-height: 1; }
.wst-card b { font: 700 .98rem/1.25 'Space Grotesk', sans-serif; }
.wst-card small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.wst-files { font: 400 .72rem 'Space Mono', monospace; color: var(--muted); opacity: .85; }
.wst-work { margin-top: 1.4rem; padding: 1rem; border-radius: 18px; border: 1px solid var(--border); border-top: 4px solid var(--lc); background: var(--glass); scroll-margin-top: 90px; }
.wst-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.wst-head > div { flex: 1 1 220px; min-width: 0; }
.wst-head .wst-emo { font-size: 2.2rem; }
.wst-head h4 { margin: 0; font: 700 1.2rem 'Space Grotesk', sans-serif; color: var(--text); }
.wst-learn { margin: .15rem 0 0; font-size: .84rem; color: var(--muted); }
.wst-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.wst-try { margin: 0 0 .8rem; padding: .6rem .9rem; border-radius: 12px; background: color-mix(in srgb, var(--lc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lc) 35%, transparent); font-size: .9rem; color: var(--text); }
.wst-try ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.wst-try li { margin: .15rem 0; }
.wst-try code { font-family: 'Space Mono', monospace; font-size: .85em; }
@media (max-width: 760px) { .wst-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .wst-work { padding: .7rem; } }