/* warp:// — сделано руками. палитра и дух: plastic-idolatry.com/erik,
 * узкая колонка: wiki.xxiivv.com. без фреймворков, без шрифтов, без cdn. */

:root {
  --bg: #111111;
  --fg: #f0f0f0;
  --link: #ffffff;
  --dim: #9a9a9a;
  --edge: #404040;
  --err: #ff7a7a;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--fg);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

main {
  max-width: 720px;
  margin: 32px auto;
  padding: 1.5rem 1rem 3rem;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .2rem;
}
.top h1 { margin: 0; }

.nav {
  display: flex;
  gap: .4rem;
}

a:link, a:visited, a:active { color: var(--link); text-decoration: none; }
a:hover { color: var(--fg); text-decoration: underline; }

h1 { font-size: 1.6rem; margin: 0 0 .2rem; letter-spacing: .05em; }
h2 { font-size: 1rem; margin: 1.4rem 0 .5rem; color: var(--link); }

.mute { color: var(--dim); }
.hint { color: var(--dim); font-size: .9em; }
.err { color: var(--err); }

.divider {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.3rem 0;
  color: var(--dim);
  user-select: none;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--edge);
}
.divider span { line-height: 1; }

.chip {
  background: none;
  border: 1px solid var(--edge);
  color: var(--fg);
  font: inherit;
  padding: .05rem .55rem;
  cursor: pointer;
}
.chip.active { background: var(--link); border-color: var(--link); color: var(--bg); }
.chip:hover:not(.active) { border-color: var(--link); }

/* чипы-ссылки в навбаре: без стандартных цветов ссылок */
a.chip:link, a.chip:visited { color: var(--fg); text-decoration: none; }
a.chip:hover { text-decoration: none; }
a.chip.active:link, a.chip.active:visited { color: var(--bg); }

/* серый переключатель протоколов (нерабочий, скоро) */
.chip-switch {
  display: inline-flex;
  gap: .2rem;
}
.chip-off {
  color: var(--dim);
  border-color: var(--edge);
  cursor: default;
}
.chip-off:hover:not(.active) { border-color: var(--edge); }

.btn {
  background: none;
  border: 1px solid var(--link);
  color: var(--link);
  font: inherit;
  padding: .3rem .8rem;
  cursor: pointer;
}
.btn:hover { background: var(--link); color: var(--bg); }
.btn:disabled { opacity: .5; cursor: wait; }

.status { color: var(--link); }

img#qr {
  display: block;
  width: min(100%, 420px);
  height: auto;
  margin: .5rem auto;
  border: 1px solid var(--edge);
  background: #fff;
  padding: .5rem;
  image-rendering: pixelated;
}

.tabs button {
  background: none;
  border: none;
  color: var(--dim);
  font: inherit;
  padding: 0 .6rem 0 0;
  cursor: pointer;
}
.tabs button.active { color: var(--fg); }
.tabs button:hover { color: var(--link); }

pre#conf {
  background: #0a0a0a;
  border: 1px solid var(--edge);
  padding: .8rem;
  margin: .5rem 0;
  overflow: auto;
  max-height: 20rem;
  white-space: pre;
}

.actions { margin: .6rem 0; }
.actions .btn { margin-right: .5rem; }

table {
  border-collapse: collapse;
  margin: .8rem 0;
  font-size: .9em;
  width: 100%;
}
th, td {
  border: 1px solid var(--edge);
  padding: .35rem .5rem;
  text-align: left;
  vertical-align: top;
}
th { color: var(--link); }

ol {
  margin: .5rem 0 .8rem;
  padding-left: 1.3rem;
}
ol li { margin: .3rem 0; }

#jumpscare {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
}
#jumpscare.show { display: flex; }
#jumpscare.hide { opacity: 0; transition: opacity .4s; }
#jumpscare-sticker {
  width: 100vw;
  height: 100vh;
  background-image: url('/foxy-sprite.png');
  background-repeat: no-repeat;
  background-size: 1400vw 100vh; /* 14 кадров, каждый по 100vw */
  background-position-x: 0;
}
#jumpscare-sticker.play {
  animation: jumpscare-play 700ms steps(13) forwards;
}
@keyframes jumpscare-play {
  from { background-position: 0 0; }
  to { background-position: -1300vw 0; } /* 13 шагов по 100vw, 14-й кадр держит forwards */
}