/* ==========================================================================
   PRZEKAŹNIK · warstwa wizualna
   monitor fosforowy, wilgotna piwnica, za dużo kabli
   ========================================================================== */

:root{
  --tlo:#05070a;
  --tlo-2:#080d11;
  --fosfor:#8ef7d0;
  --fosfor-ciemny:#3f7a68;
  --tekst:#a9bfb9;
  --tekst-jasny:#d8e8e3;
  --przygaszony:#5c7a72;
  --alarm:#ff2e88;
  --ramka:rgba(142,247,208,.16);
  --mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box}

[hidden]{display:none!important}

html,body{margin:0;padding:0}

body{
  background:var(--tlo);
  color:var(--tekst);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  text-shadow:0 0 12px rgba(142,247,208,.10);
}

/* ---------- nakładki atmosferyczne ---------- */
#skanlinie,#ziarno,#winieta{position:fixed;inset:0;pointer-events:none;z-index:900}

#skanlinie{
  background:repeating-linear-gradient(
    0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.55;
}
#skanlinie::after{
  content:"";position:absolute;left:0;right:0;height:140px;
  background:linear-gradient(180deg,transparent,rgba(142,247,208,.045),transparent);
  animation:przelot 7.5s linear infinite;
}
@keyframes przelot{0%{top:-140px}100%{top:100%}}

#ziarno{
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:drganie .6s steps(3) infinite;
}
@keyframes drganie{
  0%{transform:translate(0,0)}33%{transform:translate(-4px,3px)}
  66%{transform:translate(3px,-2px)}100%{transform:translate(0,0)}
}

#winieta{
  background:radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.75) 100%);
}

/* ---------- rozruch ---------- */
#rozruch{
  position:fixed;inset:0;z-index:800;background:var(--tlo);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2rem;gap:2rem;
}
#rozruch-log{
  font-size:.9rem;line-height:1.9;color:var(--fosfor);margin:0;
  max-width:760px;width:100%;white-space:pre-wrap;min-height:16em;
}
#rozruch-log::after{content:"▮";animation:mig 1s steps(2) infinite}
@keyframes mig{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- przyciski ---------- */
.przycisk{
  font:inherit;font-size:.76rem;letter-spacing:.18em;
  background:transparent;color:var(--fosfor);
  border:1px solid rgba(142,247,208,.45);
  padding:.62rem 1.15rem;cursor:pointer;
  transition:background .18s,color .18s,box-shadow .18s,border-color .18s;
}
.przycisk:hover{background:rgba(142,247,208,.12);box-shadow:0 0 22px rgba(142,247,208,.22)}
.przycisk:active{transform:translateY(1px)}
.przycisk.duzy{font-size:.92rem;padding:.9rem 2rem}
.przycisk.cichy{border-color:rgba(142,247,208,.2);color:var(--przygaszony)}
.przycisk.cichy:hover{color:var(--fosfor)}
.przycisk.niebezpieczny:hover{color:var(--alarm);border-color:rgba(255,46,136,.5);
  background:rgba(255,46,136,.08);box-shadow:0 0 22px rgba(255,46,136,.2)}
.przycisk[disabled]{opacity:.32;cursor:not-allowed}
.przycisk[disabled]:hover{background:transparent;box-shadow:none}

/* ---------- układ ---------- */
#aplikacja{position:relative;z-index:10;max-width:1220px;margin:0 auto;padding:1.5rem 1.4rem 4rem}

.gora{
  display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;
  flex-wrap:wrap;border-bottom:1px solid var(--ramka);padding-bottom:1.1rem;margin-bottom:1.8rem;
}
.znak{line-height:1.25}
.znak .glitch{font-size:1.55rem;letter-spacing:.42em;color:var(--fosfor);display:inline-block}
.znak small{display:block;font-size:.66rem;letter-spacing:.24em;color:var(--przygaszony);margin-top:.5rem}
.narzedzia{display:flex;gap:.5rem;flex-wrap:wrap}

.uklad{display:grid;grid-template-columns:250px 1fr;gap:2.4rem;align-items:start}
@media (max-width:900px){
  .uklad{grid-template-columns:1fr}
  .dziennik{order:2}
}

/* ---------- dziennik ---------- */
.dziennik h2{font-size:.68rem;letter-spacing:.32em;color:var(--przygaszony);
  font-weight:400;margin:0 0 1rem;border-bottom:1px solid var(--ramka);padding-bottom:.6rem}
#lista-kanalow{list-style:none;margin:0;padding:0;font-size:.76rem}
#lista-kanalow li{
  display:flex;gap:.6rem;padding:.42rem 0;border-bottom:1px dotted rgba(142,247,208,.08);
  color:#334843;letter-spacing:.06em;
}
#lista-kanalow li .nr{color:var(--fosfor-ciemny);min-width:2.2em}
#lista-kanalow li.otwarty{color:var(--tekst)}
#lista-kanalow li.otwarty .odp{color:var(--fosfor);margin-left:auto;font-size:.72rem}
#lista-kanalow li.biezacy{color:var(--fosfor);text-shadow:0 0 14px rgba(142,247,208,.5)}
#lista-kanalow li.biezacy .nr::after{content:" ◂"}
.statystyki{margin-top:1.2rem;font-size:.7rem;color:var(--przygaszony);letter-spacing:.1em;line-height:2}
.notka{font-size:.66rem;color:#334843;line-height:1.7;margin-top:1.4rem;letter-spacing:.04em}

/* ---------- pasek kanału ---------- */
.pasek-kanalu{
  display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.68rem;letter-spacing:.24em;
  color:var(--przygaszony);border:1px solid var(--ramka);padding:.6rem .9rem;margin-bottom:1.6rem;
  background:rgba(142,247,208,.02);
}
#kod-kanalu{color:var(--fosfor)}
#status-kanalu{margin-left:auto;color:#334843}

h1#tytul-kanalu{
  font-size:1.9rem;letter-spacing:.14em;color:var(--tekst-jasny);
  font-weight:400;margin:0 0 .4rem;line-height:1.25;
}
.motto{font-size:.86rem;color:var(--przygaszony);font-style:italic;margin:0 0 2rem;
  border-left:2px solid rgba(142,247,208,.2);padding-left:.9rem}

/* ---------- scena ---------- */
.scena{margin-bottom:2.4rem;animation:wejscie .55s ease both}
@keyframes wejscie{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
.scena p{margin:1rem 0}
.scena em{color:var(--fosfor);font-style:normal;border-bottom:1px dotted rgba(142,247,208,.4)}
.scena b{color:var(--tekst-jasny);font-weight:400}
.scena .szept{font-size:.68rem;letter-spacing:.22em;color:var(--przygaszony);margin:0 0 1.6rem}
.scena .polecenie{
  border-top:1px solid var(--ramka);margin-top:1.8rem;padding-top:1.1rem;color:var(--tekst-jasny);
}

/* ---------- konsola odpowiedzi ---------- */
.konsola{border:1px solid var(--ramka);padding:1.4rem;background:rgba(0,0,0,.35);margin-bottom:2rem}
.konsola label{display:block;font-size:.86rem;color:var(--tekst-jasny);letter-spacing:.04em}
.wzor{font-size:1.1rem;letter-spacing:.5em;color:var(--fosfor-ciemny);margin:.7rem 0 1rem;min-height:1.4em}
.wiersz-wejscia{display:flex;align-items:stretch;gap:.7rem;flex-wrap:wrap}
.zacheta-duza{color:var(--fosfor);font-size:1.35rem;align-self:center}
#odpowiedz{
  flex:1;min-width:200px;background:rgba(0,0,0,.55);border:1px solid rgba(142,247,208,.28);
  color:var(--fosfor);font:inherit;font-size:1.15rem;letter-spacing:.22em;
  padding:.72rem .9rem;text-transform:uppercase;outline:none;
}
#odpowiedz::placeholder{color:#2c433d;letter-spacing:.1em;text-transform:none;font-size:.9rem}
#odpowiedz:focus{border-color:var(--fosfor);box-shadow:0 0 26px rgba(142,247,208,.2) inset}
.odzew{margin-top:1rem;font-size:.78rem;letter-spacing:.12em;min-height:1.4em;color:var(--przygaszony)}
.odzew.zle{color:var(--alarm)}
.odzew.dobrze{color:var(--fosfor)}

/* zła odpowiedź — rozjazd RGB */
body.blad #aplikacja{animation:wstrzas .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes wstrzas{
  10%{transform:translate(-3px,1px)}20%{transform:translate(4px,-2px) skewX(.6deg)}
  30%{transform:translate(-5px,0)}40%{transform:translate(3px,2px)}
  50%{transform:translate(-2px,-1px) skewX(-.4deg)}100%{transform:none}
}
body.blad::after{
  content:"";position:fixed;inset:0;z-index:950;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,46,136,.10) 0 2px,transparent 2px 5px);
  animation:zanik .45s ease-out forwards;
}
@keyframes zanik{from{opacity:1}to{opacity:0}}

/* ---------- podpowiedzi ---------- */
.podpowiedzi h3{font-size:.68rem;letter-spacing:.3em;color:var(--przygaszony);font-weight:400;
  border-bottom:1px solid var(--ramka);padding-bottom:.6rem;margin:0 0 1rem}
.podpowiedzi h3 small{letter-spacing:.1em;color:#334843}
.podpowiedz{border:1px solid rgba(142,247,208,.12);padding:.85rem 1rem;margin-bottom:.7rem;
  font-size:.82rem;display:flex;gap:1rem;align-items:center;background:rgba(0,0,0,.25)}
.podpowiedz .tresc{color:var(--tekst-jasny);line-height:1.7}
.podpowiedz.zamknieta{color:#334843;letter-spacing:.24em}
.podpowiedz .przycisk{white-space:nowrap;margin-left:auto}
.podpowiedz .zegar{color:var(--przygaszony);font-size:.72rem;letter-spacing:.14em;margin-left:auto}

/* ---------- stopka ---------- */
.dol{margin-top:3.5rem;border-top:1px solid var(--ramka);padding-top:1rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.64rem;letter-spacing:.2em;color:#334843}

/* ---------- przejście między kanałami ---------- */
#przejscie{
  position:fixed;inset:0;z-index:960;background:rgba(3,5,8,.96);
  display:flex;align-items:center;justify-content:center;padding:2rem;
  animation:wejscie .4s ease both;
}
#przejscie::before{
  content:"";position:absolute;inset:0;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:drganie .35s steps(3) infinite;
}
.przejscie-tresc{position:relative;max-width:640px;text-align:center}
.przejscie-kod{font-size:.72rem;letter-spacing:.4em;color:var(--fosfor);margin-bottom:1.6rem}
.przejscie-epilog{font-size:1.05rem;line-height:1.9;color:var(--tekst-jasny);margin-bottom:2.4rem}

/* ---------- okno pomocy ---------- */
#okno-pomocy{position:fixed;inset:0;z-index:970;background:rgba(3,5,8,.94);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;overflow:auto}
.okno{max-width:640px;border:1px solid var(--ramka);background:var(--tlo-2);padding:2rem}
.okno h2{font-size:.8rem;letter-spacing:.32em;color:var(--fosfor);font-weight:400;margin:0 0 1.4rem}
.okno ul{padding-left:1.1rem;margin:0 0 1.4rem}
.okno li{margin-bottom:.8rem;font-size:.86rem;line-height:1.8}
.okno code{color:var(--fosfor);font-size:.82rem}
.okno em{color:var(--fosfor);font-style:normal}
.okno b{color:var(--tekst-jasny);font-weight:400}

/* ---------- drobne ---------- */
.brak-skryptu{position:fixed;inset:0;z-index:999;background:var(--tlo);color:var(--alarm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  letter-spacing:.2em;text-align:center;padding:2rem}
.szept-maly{color:#22322e}

.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-tekst);position:absolute;left:0;top:0;width:100%;overflow:hidden;
  clip-path:inset(0 0 0 0);
}
.glitch::before{color:var(--alarm);animation:usterka-a 5.5s infinite steps(2);opacity:.55}
.glitch::after{color:#4fd8ff;animation:usterka-b 4.1s infinite steps(2);opacity:.45}
@keyframes usterka-a{
  0%,92%{transform:none;clip-path:inset(0 0 100% 0)}
  93%{transform:translate(-3px,1px);clip-path:inset(12% 0 62% 0)}
  95%{transform:translate(2px,-1px);clip-path:inset(58% 0 18% 0)}
  97%{transform:translate(-2px,0);clip-path:inset(32% 0 44% 0)}
  99%,100%{transform:none;clip-path:inset(0 0 100% 0)}
}
@keyframes usterka-b{
  0%,89%{transform:none;clip-path:inset(0 0 100% 0)}
  90%{transform:translate(3px,-1px);clip-path:inset(44% 0 30% 0)}
  93%{transform:translate(-3px,2px);clip-path:inset(8% 0 74% 0)}
  96%,100%{transform:none;clip-path:inset(0 0 100% 0)}
}

::selection{background:var(--fosfor);color:#03110c;text-shadow:none}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#03080b}
::-webkit-scrollbar-thumb{background:#1d3a33}
::-webkit-scrollbar-thumb:hover{background:var(--fosfor-ciemny)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;animation-iteration-count:1!important}
  #ziarno,#skanlinie::after{display:none}
}