/* =====================================================================
   CRT / CYBERPUNK TERMINAL
   Kolory motywów na górze — zmieniasz tylko zmienne.
   ===================================================================== */
:root {
  --bg: #04070a;
  --bg-2: #08110d;
  --fg: #39ff7a;
  --fg-dim: #1f8f48;
  --hl: #b6ffcf;
  --accent: #ff2bd6;   /* magenta — cyberpunk */
  --accent-2: #00e5ff; /* cyan */
  --err: #ff4d6d;
  --ok: #7dff9e;
  --glow: 0 0 2px currentColor, 0 0 8px color-mix(in srgb, currentColor 55%, transparent);
  --font: "VT323", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --fs: clamp(17px, 1.05rem + 0.35vw, 22px);
}
body[data-theme="amber"] {
  --fg: #ffb000; --fg-dim: #a06a00; --hl: #ffe3a3; --ok: #ffd36b;
  --accent: #ff5a1f; --accent-2: #ffd000; --bg-2: #120c03;
}
body[data-theme="cyber"] {
  --fg: #00e5ff; --fg-dim: #0a7f93; --hl: #c8fbff; --ok: #6dffdc;
  --accent: #ff2bd6; --accent-2: #f5ff3b; --bg-2: #0a0716;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(ellipse at center, var(--bg-2) 0%, var(--bg) 70%) fixed, var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------- monitor ---------- */
.crt {
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  text-shadow: var(--glow);
  animation: flicker 6s infinite steps(1);
}
/* scanlines */
.crt::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.28) 2px 3px);
  mix-blend-mode: multiply;
}
/* winieta + przesuwający się pas odświeżania */
.crt::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 21;
  background:
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--fg) 7%, transparent) 50%, transparent 100%) 0 -30vh / 100% 30vh no-repeat,
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
  animation: refresh 7s linear infinite;
}
@keyframes refresh { to { background-position: 0 130vh, 0 0; } }
@keyframes flicker { 0%,100% { opacity: 1; } 47% { opacity: .96; } 48% { opacity: 1; } 83% { opacity: .98; } }

.titlebar, .statusbar {
  display: flex; align-items: center; gap: 1rem;
  padding: .35rem 1rem;
  background: color-mix(in srgb, var(--fg) 8%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  font-size: .85em; white-space: nowrap; overflow: hidden;
}
.statusbar { border-top: 1px solid color-mix(in srgb, var(--fg) 30%, transparent); border-bottom: 0; color: var(--fg-dim); }
.statusbar .hint { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.titlebar .title { flex: 1; text-align: center; color: var(--hl); }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.dots i:nth-child(2) { background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2); }
.dots i:nth-child(3) { background: var(--fg); box-shadow: 0 0 6px var(--fg); }

.screen {
  overflow-y: auto; overflow-x: hidden;
  padding: 1rem clamp(16px, 3vw, 2.5rem) 2rem;
  scrollbar-width: thin; scrollbar-color: var(--fg-dim) transparent;
  cursor: text;
}
#output { max-width: 1100px; }
.line { white-space: pre-wrap; word-break: break-word; min-height: 1.25em; }
.line.echo { margin-top: .4em; }
.block { margin: .25em 0 .6em; }
/* szablony HTML mają wcięcia — w blokach nie renderujemy ich jako spacji */
.block, .page, .help, .ls-dirs, .loader { white-space: normal; }

/* ---------- kolory semantyczne ---------- */
.dim { color: var(--fg-dim); text-shadow: none; }
.hl { color: var(--hl); }
.ok { color: var(--ok); }
.err, .err-line { color: var(--err); }
.p-user { color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.p-path { color: var(--accent-2); text-shadow: 0 0 6px var(--accent-2); }
a { color: var(--accent-2); text-underline-offset: 3px; }
a:hover { background: var(--accent-2); color: var(--bg); text-shadow: none; }

/* ---------- prompt ---------- */
.prompt-line { display: flex; flex-wrap: wrap; margin-top: .4em; max-width: 1100px; }
.typed-wrap { position: relative; flex: 1; min-width: 6ch; }
#typed-before, #typed-after { white-space: pre; }
.cmd {
  position: absolute; inset: 0; width: 100%;
  opacity: 0; border: 0; padding: 0; margin: 0;
  font: inherit; font-size: 16px; /* brak zoomu na iOS */
  background: transparent; color: transparent; caret-color: transparent;
}
.cursor { display: inline-block; min-width: 1ch; }
.cursor.on { background: var(--fg); color: var(--bg); text-shadow: none; box-shadow: 0 0 8px var(--fg); animation: blink 1.05s steps(1) infinite; }
@keyframes blink { 50% { background: transparent; color: inherit; box-shadow: none; } }

/* ---------- loader ---------- */
.ld-head, .ld-bar { white-space: pre; }
.ld-head { letter-spacing: .05em; }
.ld-fill { color: var(--fg); }
.loader.done .ld-fill { color: var(--ok); }
.loader.aborted { opacity: .6; }
.ld-log > div { white-space: pre-wrap; animation: none; }

/* ---------- reveal po załadowaniu ---------- */
.reveal .page > *, .reveal .help > * { opacity: 0; transform: translateX(-4px); }
.reveal.go .page > *, .reveal.go .help > * {
  animation: in .28s steps(4) forwards; animation-delay: var(--d, 0ms);
}
@keyframes in { to { opacity: 1; transform: none; } }
.page { margin-top: .8em; }

/* ---------- komendy klikalne ---------- */
.cmdlink, .ls-row, .tbtn {
  font: inherit; color: inherit; text-shadow: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.cmdlink { color: var(--hl); border-bottom: 1px dashed var(--fg-dim); }
.cmdlink:hover, .cmdlink:focus-visible { background: var(--fg); color: var(--bg); text-shadow: none; outline: none; }
.nav, .ls-dirs { display: flex; flex-wrap: wrap; gap: .4em 1.4em; margin-top: 1em; }
.nav .cmdlink::before { content: "> "; color: var(--accent); }

/* ---------- home ---------- */
.banner {
  margin: 0 0 .5em; font-family: "IBM Plex Mono", monospace; font-size: clamp(6px, 1.25vw, 13px);
  line-height: 1.05; color: var(--fg);
  text-shadow: 2px 0 var(--accent), -2px 0 var(--accent-2), var(--glow);
  animation: glitch 5s infinite;
}
.banner-alt { display: none; font-size: 2em; margin: 0; font-weight: normal; }
@keyframes glitch {
  0%, 92%, 100% { transform: none; clip-path: none; }
  93% { transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); }
  94% { transform: translate(3px, -1px); clip-path: inset(60% 0 5% 0); }
  95% { transform: translate(-1px, 0); clip-path: none; }
}
.tagline { color: var(--accent-2); text-shadow: 0 0 6px var(--accent-2); margin: 0 0 1em; }

/* ---------- mini-markdown ---------- */
.md p { margin: .5em 0; max-width: 72ch; }
.md h3 { font-weight: normal; font-size: 1em; margin: 1em 0 .2em; color: var(--accent); text-shadow: 0 0 6px var(--accent); }
.md h3::before { content: "## "; }
.md ul { margin: .3em 0; padding-left: 0; list-style: none; }
.md li::before { content: "  * "; color: var(--accent-2); }
.md blockquote { margin: .8em 0; padding-left: 1ch; border-left: 2px solid var(--accent); color: var(--hl); }
.md code, code { color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); padding: 0 .3ch; }
.md strong { color: var(--hl); font-weight: normal; text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------- about / neofetch ---------- */
.neofetch { display: flex; gap: 2.5rem; flex-wrap: wrap; align-items: flex-start; }
.neofetch .logo { margin: 0; color: var(--accent-2); text-shadow: 0 0 6px var(--accent-2); }
.facts > div { white-space: pre; }
.facts .key { color: var(--accent); text-shadow: 0 0 5px var(--accent); }
.swatches { display: flex; gap: 0; margin-top: .6em; }
.swatches i { width: 2.2ch; height: 1em; }
.swatches i:nth-child(1) { background: var(--bg-2); }
.swatches i:nth-child(2) { background: var(--fg-dim); }
.swatches i:nth-child(3) { background: var(--fg); }
.swatches i:nth-child(4) { background: var(--accent-2); }
.swatches i:nth-child(5) { background: var(--accent); }
.swatches i:nth-child(6) { background: var(--hl); }

/* ---------- skills ---------- */
.skill-group { margin-bottom: 1em; }
.group-head { color: var(--accent); text-shadow: 0 0 5px var(--accent); }
.skill { display: flex; align-items: center; gap: 1ch; white-space: pre; }
.skill-bar { position: relative; flex: 0 1 32ch; height: .7em; border: 1px solid var(--fg-dim); }
.skill-bar > span {
  position: absolute; inset: 1px auto 1px 1px; width: 0;
  background: repeating-linear-gradient(90deg, var(--fg) 0 .9ch, transparent .9ch 1ch);
  box-shadow: 0 0 8px var(--fg);
  transition: width 1.2s steps(20);
}
.reveal.go .skill-bar > span { width: calc((100% - 2px) * var(--lvl) / 100); }
.skill-pct { color: var(--hl); }

/* ---------- listy work/hobby ---------- */
.ls { display: grid; gap: .1em; }
.ls-row {
  display: grid; text-align: left; width: 100%;
  grid-template-columns: 11ch 8ch minmax(10ch, 16ch) 1fr;
  grid-template-areas: "perm date id title" "perm date id sum";
  column-gap: 1.5ch; padding: .15em .4ch;
}
.ls-perm { grid-area: perm; } .ls-date { grid-area: date; } .ls-id { grid-area: id; }
.ls-title { grid-area: title; } .ls-sum { grid-area: sum; }
.ls-row:hover, .ls-row:focus-visible { background: color-mix(in srgb, var(--fg) 14%, transparent); outline: 1px solid var(--fg-dim); }
.ls-row:hover .ls-id { color: var(--accent); }

/* ---------- wpis ---------- */
.page-entry h2 { font-weight: normal; font-size: 1.6em; margin: .1em 0; color: var(--hl); }
.entry-meta { margin-bottom: .8em; }
.tag { color: var(--accent); text-shadow: 0 0 4px var(--accent); margin-right: .6ch; }
.crt-img { margin: .8em 0; max-width: 560px; position: relative; border: 1px solid var(--fg-dim); }
.crt-img img { display: block; width: 100%; filter: grayscale(1) contrast(1.15) brightness(.9) sepia(.4); }
.crt-img::after { content: ""; position: absolute; inset: 0; background: var(--fg); mix-blend-mode: multiply; opacity: .7; }

/* ---------- formularz ---------- */
.tform { max-width: 70ch; display: grid; gap: .5em; }
.trow { display: flex; gap: 1ch; align-items: baseline; flex-wrap: wrap; }
.trow-col { flex-direction: column; align-items: stretch; }
.trow label { color: var(--accent); text-shadow: 0 0 5px var(--accent); min-width: 8ch; }
.tform input, .tform textarea {
  flex: 1; min-width: 0;
  font: inherit; font-size: max(16px, 1em); color: var(--hl); text-shadow: var(--glow);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 0; border-bottom: 1px dashed var(--fg-dim); padding: .15em .5ch;
  caret-color: var(--fg); outline: none; resize: vertical;
}
.tform textarea { border: 1px dashed var(--fg-dim); }
.tform input:focus, .tform textarea:focus { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 8%, transparent); }
.tbtn { color: var(--bg); background: var(--fg); padding: .1em 1ch; text-shadow: none; box-shadow: 0 0 10px var(--fg); }
.tbtn:hover, .tbtn:focus-visible { background: var(--accent); box-shadow: 0 0 14px var(--accent); outline: none; }
.tbtn:disabled { opacity: .5; cursor: wait; }
.hp { position: absolute; left: -9999px; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--err); }

/* ---------- help ---------- */
.help-row { display: grid; grid-template-columns: minmax(16ch, 30ch) 1fr; gap: 2ch; }
.help-row .cmdlink { justify-self: start; }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .statusbar .hint { display: none; }
  .statusbar { justify-content: space-between; }
  .banner { display: none; }
  .banner-alt { display: block; text-shadow: 2px 0 var(--accent), -2px 0 var(--accent-2), var(--glow); }
  .ls-row { grid-template-columns: 8ch 1fr; grid-template-areas: "date id" "title title" "sum sum"; padding: .4em .4ch; border-bottom: 1px dashed color-mix(in srgb, var(--fg) 20%, transparent); }
  .ls-perm { display: none; }
  .help-row { grid-template-columns: 1fr; gap: 0; margin-bottom: .3em; }
  .neofetch { gap: 1rem; }
  .neofetch .logo { display: none; }
  .facts > div { white-space: pre-wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .crt, .crt::after, .banner, .cursor.on { animation: none !important; }
  .reveal .page > *, .reveal .help > * { opacity: 1; transform: none; animation: none !important; }
  .skill-bar > span { transition: none; }
}