/* EscapeVerse → Informatyka: dodatki do stylów kompendium (tl3d.css) i escape roomu (escape.css) z Centrum Nauki.
   Kompendium: przełącznik bitów, mini arkusz, kod Python/C++ z kalkulatorem NWD, HTML z podglądem, bloki Scratcha.
   Escape room: monitor z 10 bitami kodu, wirus przy błędzie, finał z wagami. Animacje tylko transform/opacity. */

/* ── Kompendium: strzałki w schemacie blokowym ── */
.inf-ar { fill: color-mix(in srgb, var(--text) 55%, transparent); }

/* przełącznik bitów */
.inf-bits-box { text-align: center; }
.inf-bits { display: flex; justify-content: center; gap: .4rem; flex-wrap: nowrap; }
.inf-bit { display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 52px; padding: .55rem 0 .45rem; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--text); background: var(--bg2); border: 2px solid var(--border); transition: border-color .2s, background-color .2s, box-shadow .2s; }
.inf-bit b { font: 700 1.5rem/1 'Space Mono', ui-monospace, monospace; color: var(--muted); }
.inf-bit small { font-size: .72rem; color: var(--muted); }
.inf-bit[aria-pressed="true"] { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 14%, var(--bg2)); box-shadow: 0 0 18px -6px var(--acc); }
.inf-bit[aria-pressed="true"] b { color: var(--acc); }
.inf-bit:hover { border-color: color-mix(in srgb, var(--acc) 60%, transparent); }
.inf-bit:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.inf-bit.flip b { animation: inf-flip .35s ease; }
@keyframes inf-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
.inf-bits-out { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; margin: .9rem 0 .7rem; font-size: .92rem; color: var(--muted); }
.inf-bits-out b { font: 700 1.05rem 'Space Mono', ui-monospace, monospace; color: var(--text); }
.inf-bits-try { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }

/* mini arkusz */
.inf-fbar { display: flex; align-items: stretch; margin-bottom: .5rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg2); font-size: .88rem; }
.inf-fbar-addr { min-width: 3.4rem; padding: .4rem .6rem; font-weight: 700; border-right: 1px solid var(--border); text-align: center; }
.inf-fbar-fx { padding: .4rem .55rem; font-style: italic; color: var(--muted); border-right: 1px solid var(--border); }
.inf-fbar-val { padding: .4rem .7rem; font-family: 'Space Mono', ui-monospace, monospace; overflow-wrap: anywhere; }
.inf-sheet { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 380px; background: var(--bg2); }
.inf-sheet th { padding: .3rem; font-size: .74rem; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--text) 5%, var(--bg2)); border: 1px solid var(--border); }
.inf-sheet td { padding: 0; border: 1px solid var(--border); }
.inf-cell { display: block; width: 100%; padding: .45rem .55rem; text-align: left; font: inherit; color: var(--text); background: transparent; border: 0; cursor: pointer; }
.inf-cell.is-h { font-weight: 700; }
.inf-cell.is-f { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.inf-cell:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }
.inf-cell.is-sel { outline: 2px solid var(--acc); outline-offset: -2px; }
.inf-cell:focus-visible { outline: 3px solid var(--acc); outline-offset: -3px; }
.inf-sheet-tip { margin: .6rem 0 0; min-height: 1.6em; font-size: .88rem; }

/* kod + NWD */
.inf-tabs { display: flex; gap: .35rem; margin-bottom: .5rem; }
.inf-tab { padding: .4rem .9rem; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; color: var(--text); background: transparent; border: 1px solid var(--border); }
.inf-tab[aria-selected="true"] { color: #fff; background: var(--acc); border-color: var(--acc); }
body:not(.light) .inf-tab[aria-selected="true"] { color: #06101F; }
.inf-tab:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.inf-code-box .tl3d-code, .inf-html .tl3d-code { margin: 0; }
.inf-nwd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .8rem; font-size: .9rem; }
.inf-nwd label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.inf-nwd input { width: 5.5rem; padding: .4rem .5rem; border-radius: 8px; font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--border); }
.inf-nwd input:focus { outline: 2px solid var(--acc); outline-offset: 1px; }
.inf-steps { margin: .6rem 0 0; padding-left: 1.4rem; font-family: 'Space Mono', ui-monospace, monospace; font-size: .82rem; }
.inf-steps li.is-end { font-weight: 700; color: var(--acc); list-style: none; margin-left: -1.4rem; margin-top: .4rem; }

/* HTML + podgląd w „przeglądarce” */
.inf-html { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.inf-html > div { min-width: 0; }
.inf-html .tl3d-code { font-size: .76rem; }
.inf-pix rect { stroke-width: 1; }
.inf-browser { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fff; color: #111; }
.inf-browser-bar { display: flex; align-items: center; gap: .3rem; padding: .4rem .6rem; background: #E8EBF0; border-bottom: 1px solid #D5DAE2; }
.inf-browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: #C3C9D3; }
.inf-browser-bar em { margin-left: .5rem; padding: .1rem .6rem; border-radius: 6px 6px 0 0; font-style: normal; font-size: .74rem; background: #fff; }
.inf-browser-page { padding: .8rem 1rem 1rem; font-family: 'Times New Roman', Times, serif; font-size: .95rem; line-height: 1.45; }
.inf-browser-page h4 { margin: 0 0 .5rem; font: 700 1.5rem 'Times New Roman', Times, serif; }
.inf-browser-page p { margin: 0 0 .5rem; }
.inf-browser-page ul { margin: 0 0 .5rem; padding-left: 1.4rem; }
.inf-fake-link { color: #0000EE; text-decoration: underline; }

/* bloki Scratcha (poglądowo) */
.inf-scratch { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; font: 700 .9rem 'Inter', sans-serif; }
.inf-scratch .sb { position: relative; padding: .5rem .8rem; border-radius: 6px; color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.18); }
.inf-scratch .hat { border-radius: 18px 18px 6px 6px; padding-top: .7rem; }
.inf-scratch .ev { background: #FFBF00; color: #3B2A00; }
.inf-scratch .ev i { color: #2F9E44; }
.inf-scratch .ctl { background: #FFAB19; color: #3B2A00; padding-bottom: .7rem; }
.inf-scratch .mot { background: #4C97FF; }
.inf-scratch .looks { background: #9966FF; }
.inf-scratch .sb-in { display: flex; flex-direction: column; gap: 2px; margin: .4rem 0 0 .9rem; }
.inf-scratch .v { display: inline-block; min-width: 1.6em; margin: 0 .2rem; padding: .05rem .5rem; border-radius: 999px; text-align: center; color: #333; background: #fff; font-weight: 600; }

@media (max-width: 760px) { .inf-html { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .inf-bits { gap: .25rem; }
  .inf-bit { width: auto; flex: 1 1 0; min-width: 0; padding: .45rem 0 .35rem; border-radius: 10px; }
  .inf-bit b { font-size: 1.2rem; }
  .inf-bit small { font-size: .62rem; }
  .inf-sheet { min-width: 0; font-size: .8rem; }
  .inf-cell { padding: .4rem .35rem; }
  .inf-scratch { font-size: .82rem; }
}

/* ── Escape room: monitor z bitami kodu ── */
.esc-inf .inf-cell-b rect { fill: rgba(0, 229, 255, .05); stroke: rgba(0, 229, 255, .35); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.esc-inf .inf-cell-b .v { font: 700 17px 'Space Mono', monospace; fill: #4B5B7E; }
.esc-inf .inf-cell-b .w { font: 700 8px 'Space Mono', monospace; fill: #6F82A6; }
.esc-inf .inf-cell-b.cur rect { stroke: var(--c1); fill: rgba(0, 229, 255, .14); }
.esc-inf .inf-cell-b.cur .v { fill: var(--c1); animation: esc-blink 1s steps(1) infinite; }
.esc-inf .inf-cell-b.on rect { stroke: rgba(34, 245, 154, .6); }
.esc-inf .inf-cell-b.one rect { fill: rgba(34, 245, 154, .22); }
.esc-inf .inf-cell-b.one .v { fill: var(--ok); }
.esc-inf .inf-cell-b.zero .v { fill: #9FB2D3; }
.esc-inf .inf-cell-b { transform-box: fill-box; transform-origin: center; }
.esc-inf .inf-cell-b.flip { animation: inf-cellflip .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes inf-cellflip { 0% { transform: scaleY(1); } 35% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
.esc-inf .inf-scanline { fill: rgba(0, 229, 255, .12); animation: inf-scan 3.2s linear infinite; }
@keyframes inf-scan { from { transform: translateY(-20px); } to { transform: translateY(132px); } }
.esc-inf .inf-pwr { fill: var(--ok); filter: drop-shadow(0 0 3px var(--ok)); }
.esc-inf .inf-bug { opacity: 0; transform-box: fill-box; transform-origin: center; }
.esc-inf .inf-bug ellipse, .esc-inf .inf-bug circle { fill: var(--bad); }
.esc-inf .inf-bug path { fill: none; stroke: var(--bad); stroke-width: 3; stroke-linecap: round; }
.esc-inf .inf-bug .eye { fill: #050812; }
.esc-inf .esc-rig.is-err .inf-bug { animation: inf-bug 1.6s ease-out; }
@keyframes inf-bug { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(1) rotate(-8deg); } 45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.esc-inf .esc-rig.is-err .inf-scr { fill: rgba(255, 61, 110, .12); stroke: var(--bad); }
.esc-inf .esc-rig.is-err .esc-screen-txt { fill: var(--bad); }
.esc-inf .inf-bug.is-on { opacity: 1; animation: inf-wiggle 1.4s ease-in-out infinite; }
@keyframes inf-wiggle { 50% { transform: rotate(6deg) scale(1.04); } }
.esc-inf .inf-scr-bad { fill: rgba(255, 61, 110, .1); stroke: rgba(255, 61, 110, .6); }
.esc-inf .inf-err-txt { font: 700 13px 'Space Mono', monospace; fill: var(--bad); letter-spacing: 2px; }

/* finał: kod z wagami nad odpowiedziami */
.esc-inf .inf-final { display: flex; justify-content: center; gap: .3rem; margin: 0 0 .5rem; flex-wrap: nowrap; }
.esc-inf .inf-final span { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; max-width: 46px; padding: .3rem 0; border-radius: 9px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); }
.esc-inf .inf-final b { font: 700 1.15rem 'Space Mono', monospace; color: #9FB2D3; }
.esc-inf .inf-final small { font: 700 .62rem 'Space Mono', monospace; color: var(--dim); }
.esc-inf .inf-final .one { border-color: rgba(34, 245, 154, .55); background: rgba(34, 245, 154, .12); }
.esc-inf .inf-final .one b { color: var(--ok); }
.esc-inf .inf-final .one small { color: #C8FFE6; }
.esc-inf .inf-code-line { margin: -.2rem 0 .7rem; font-size: 1.05rem; color: var(--c1); overflow-wrap: anywhere; }
.esc-inf .inf-code-line sub { font-size: .65em; }
.esc-inf .esc-door .fly { width: 40%; }

@media (max-width: 560px) {
  .esc-inf .inf-final { gap: .15rem; }
  .esc-inf .inf-final b { font-size: .95rem; }
  .esc-inf .inf-final small { font-size: .54rem; }
}
@media (prefers-reduced-motion: reduce) {
  .esc-inf .inf-scanline, .esc-inf .inf-bug.is-on, .inf-bit.flip b { animation: none !important; }
}

/* link z tematu HTML do kursu Strony www */
.inf-more-link a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 12px; font-weight: 600; color: var(--acc); text-decoration: none; background: color-mix(in srgb, var(--acc) 10%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); }
.inf-more-link a:hover { background: color-mix(in srgb, var(--acc) 18%, transparent); }