/* Gry „Druk 3D”: przełącznik gier (gry-core.js) oraz dodatki „Wąż z filamentu” (waz.js, prefiks gw-) i „Skok przez pracownię” (skoczek.js, prefiks gs-).
   Konsola gier = .lab z labirynt.css (zawsze ciemna). Przełącznik w kolorach strony (jasny i ciemny motyw). Animacje tylko transform/opacity. */
.lab[hidden] { display: none !important; }

/* ── Przełącznik: 3 karty gier ── */
.gry-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; max-width: 980px; margin: 0 auto 1.1rem; }
.gry-tab { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .8rem; row-gap: .15rem;
  align-items: center; text-align: left; padding: .85rem 1rem; border-radius: 18px; cursor: pointer; font: inherit; color: var(--text, #F0F4FF);
  background: var(--glass, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; -webkit-tap-highlight-color: transparent; }
.gry-tab::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gc) 22%, transparent), transparent 60%); }
.gry-tab:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--gc) 55%, transparent); }
.gry-tab:focus-visible { outline: 3px solid var(--gc); outline-offset: 3px; }
.gry-tab[aria-selected="true"] { border-color: var(--gc); box-shadow: 0 14px 34px -18px var(--gc), inset 0 0 0 1px color-mix(in srgb, var(--gc) 45%, transparent); }
.gry-tab[aria-selected="true"]::before { opacity: 1; }
.gry-ico { grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, var(--gc), var(--gc2)); box-shadow: 0 8px 18px -8px var(--gc); transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.gry-tab:hover .gry-ico, .gry-tab[aria-selected="true"] .gry-ico { transform: rotate(-6deg) scale(1.06); }
.gry-tab b { font: 700 1rem/1.2 'Space Grotesk', sans-serif; }
.gry-tab small { font-size: .78rem; line-height: 1.35; color: var(--muted, #8892A4); }
.gry-tab .gry-new { position: absolute; top: .55rem; right: .6rem; padding: .12rem .45rem; border-radius: 999px; font: 700 .62rem/1.3 'Space Mono', monospace; letter-spacing: .06em;
  color: #fff; background: linear-gradient(135deg, var(--gc), var(--gc2)); }
.gry-tab[data-gra="labirynt"] { --gc: #00B8D9; --gc2: #7B2FBE; }
.gry-tab[data-gra="waz"] { --gc: #FF6B35; --gc2: #D6336C; }
.gry-tab[data-gra="skoczek"] { --gc: #16C784; --gc2: #0B7FD1; }
@media (max-width: 760px) {
  .gry-pick { gap: .5rem; }
  .gry-tab { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .75rem .4rem .7rem; row-gap: .35rem; }
  .gry-ico { grid-row: auto; width: 42px; height: 42px; font-size: 1.05rem; }
  .gry-tab b { font-size: .86rem; }
  .gry-tab small { display: none; }
  .gry-tab .gry-new { top: .35rem; right: .35rem; font-size: .55rem; }
}
@media (max-width: 380px) { .gry-tab b { font-size: .78rem; } }

/* ── Wąż z filamentu ── */
.gw-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; margin: -.3rem 0 .7rem; padding: .45rem .8rem; border-radius: 12px; min-height: 2.1rem;
  font: 700 .95rem/1.4 'Space Mono', monospace; color: #E8F4FF; background: rgba(255, 107, 53, .08); border: 1px solid rgba(255, 107, 53, .28); }
.gw-eq b { color: #FFC233; }
.gw-eq-k { font: 600 .74rem 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #FF9F43; }
.gw-eq-goal { margin-left: auto; font-size: .82rem; color: #8FA3BF; }
.gw .lab-stat.gw-order b { max-width: 15ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Space Grotesk', sans-serif; }
.gw .lab-stat.gw-order i { color: #FF9F43; }
.gw .lab-stat.gw-sum i { color: #22F59A; }
.gw .gw-time { margin-left: auto; }
.gw .gw-time.gw-hurry b { color: #FF3D6E; animation: gw-hurry .6s ease-in-out infinite; }
@keyframes gw-hurry { 50% { opacity: .45; } }
.gw-card h3 { font-family: 'Space Mono', monospace !important; }
.gw-done h3 { color: #22F59A !important; font-family: 'Space Grotesk', sans-serif !important; }
.gw-math { margin: 0 0 .8rem; font: 700 1.05rem 'Space Mono', monospace; color: #E8F4FF; }
.gw-math b { color: #22F59A; }
.gw-calc { display: flex; gap: .75rem; align-items: flex-start; text-align: left; margin: 0 0 .8rem; padding: .75rem .85rem; border-radius: 14px;
  background: rgba(255, 194, 51, .07); border: 1px solid rgba(255, 194, 51, .3); }
.gw-calc > i { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #1B1300; background: #FFC233; }
.gw-calc b { display: block; font: 700 .9rem 'Space Grotesk', sans-serif; color: #fff; }
.gw-calc span { display: block; margin: .15rem 0; font: 700 .92rem 'Space Mono', monospace; color: #E8F4FF; }
.gw-calc span b { display: inline; color: #FFC233; font-family: inherit; }
.gw-calc small { display: block; font-size: .76rem; line-height: 1.4; color: #8FA3BF; }
.gw-fact { display: flex; gap: .8rem; align-items: flex-start; text-align: left; margin: 0 0 .8rem; padding: .8rem .9rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.gw-fact .lab-fact-ico { flex: none; width: 40px; height: 40px; margin: 0; font-size: 1.3rem; border-radius: 12px; }
.gw-fact p { margin: .1rem 0 .3rem !important; color: #fff !important; font: 600 .95rem/1.5 'Space Grotesk', sans-serif !important; }
.lg.gw-lg-sp { border-radius: 50%; color: #fff; font: 800 .72rem 'Space Grotesk', sans-serif; background: radial-gradient(circle, #0B1024 0 46%, #FF6B35 48% 100%); }
.lg.gw-lg-ok { color: #0E3B2A; background: #22F59A; }
.lg.gw-lg-bad { color: #fff; background: #FF3D6E; }
.lg.gw-lg-pr { color: #7A8CC8; background: #1E2A55; }
@media (max-width: 560px) {
  .gw-eq { font-size: .82rem; padding: .35rem .6rem; margin: -.2rem 0 .55rem; }
  .gw-eq-goal { font-size: .74rem; }
  .gw .lab-stat.gw-order { display: none; }
  .gw .lab-lvl { display: none; }
  .gw-calc { flex-direction: column; }
}

/* ── Skok przez pracownię ── */
.gs-pad { grid-template-columns: 64px 64px 1fr; grid-template-rows: 56px; grid-template-areas: "l r j"; max-width: 380px; gap: .5rem; }
.gs-pad .gs-l { grid-area: l; } .gs-pad .gs-r { grid-area: r; }
.gs-pad .gs-j { grid-area: j; display: flex; align-items: center; justify-content: center; gap: .45rem; font: 700 .95rem 'Space Grotesk', sans-serif;
  background: linear-gradient(135deg, rgba(22, 199, 132, .25), rgba(11, 127, 209, .25)); border-color: rgba(22, 199, 132, .5); }
.gs-quiz h3 { font-size: clamp(1.05rem, 2.4vw, 1.3rem) !important; line-height: 1.35 !important; }
.gs-quiz .lab-kick i { margin-right: .3rem; }
.gs-ans { display: grid; gap: .5rem; margin: .4rem 0 .8rem; }
.gs-a { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .8rem; border-radius: 14px; cursor: pointer; text-align: left; color: #E8F4FF;
  font: 600 .95rem/1.35 'Inter', sans-serif; background: rgba(255,255,255,.05); border: 1px solid rgba(0, 229, 255, .28); transition: background .2s, border-color .2s, transform .15s; }
.gs-a b { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font: 700 .9rem 'Space Mono', monospace; color: #00E5FF; background: rgba(0, 229, 255, .1); }
.gs-a:hover:not(:disabled) { background: rgba(0, 229, 255, .12); border-color: #00E5FF; transform: translateX(3px); }
.gs-a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.gs-a:disabled { cursor: default; opacity: .6; }
.gs-a.ok { opacity: 1; border-color: #22F59A; background: rgba(34, 245, 154, .12); }
.gs-a.ok b { color: #0E3B2A; background: #22F59A; }
.gs-a.bad { opacity: 1; border-color: #FF3D6E; background: rgba(255, 61, 110, .12); }
.gs-a.bad b { color: #fff; background: #FF3D6E; }
.gs-why { text-align: left; font-size: .9rem !important; }
.gs-why b { color: #FFC233 !important; }
.gs-why .lab-link { margin-left: .2rem; }
.lg.gs-lg-t { color: #00E5FF; background: #0B1024; border: 1px solid #00E5FF; }
.lg.gs-lg-j { color: #0E3B2A; background: #22F59A; }
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) {
  .gs-pad { grid-template-columns: 54px 54px; grid-template-rows: 50px 50px; grid-template-areas: "j j" "l r"; max-width: none; }
}
.lab .lab-over [hidden] { display: none !important; }
/* wąż ma pod paskiem jeszcze działanie – plansza odpowiednio niższa, żeby cała konsola mieściła się na ekranie */
.gw .lab-stage { width: min(100%, calc((100svh - 275px) * var(--lab-ar, 1.69))); }
.gw.is-full .lab-stage, .gw.is-full .lab-hud, .gw.is-full .gw-eq { width: min(100%, calc((100vh - 185px) * var(--lab-ar, 1.69))); margin-left: auto; margin-right: auto; }
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1000px) { .gw-eq { display: none; } .gw .lab-stage { width: min(100%, calc((100svh - 120px) * var(--lab-ar, 1.69))); } }
