/* ============================================================
   CTF TERMINAL — design tokens + terminal chrome
   (design repris du mockup Fubuki / Claude Design)
   ============================================================
   TOKENS
   color.bg          #0D1117   terminal background (github dark)
   color.fg          #C9D1D9   default output text
   color.dim         #8B949E   secondary / de-emphasized output
   color.green       #7EE787   prompt, success, executables
   color.red         #FF7B72   stderr, failures
   color.amber       #E3B341   system info, warnings
   color.cyan        #76E3EA   paths, links
   color.blue        #79C0FF   alt accent (rarely used)
   color.magenta     #D2A8FF   corruption artifacts / binary noise
   color.selection   #163356   text selection
   font.term         Iosevka, JetBrains Mono, monospace
   font.size         15px      (13px under 720px viewport)
   font.leading      1.4
   space.pad         16px 18px terminal inset
   anim.cursor       1.06s steps(1) infinite
   anim.glitch       0.25s steps(3) ×1 at load
   texture.scanlines 3px pitch, opacity .35
   ============================================================ */

:root {
  --bg: #0D1117;
  --fg: #C9D1D9;
  --dim: #8B949E;
  --grn: #7EE787;
  --red: #FF7B72;
  --yel: #E3B341;
  --cyn: #76E3EA;
  --blu: #79C0FF;
  --mag: #D2A8FF;
  --sel: #163356;
  --crt-op: 0.35;
  --font-term: 'Iosevka Web', 'JetBrains Mono', 'Courier New', monospace;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
}

body {
  font-family: var(--font-term);
  font-size: 15px;
  line-height: 1.4;
  color: var(--fg);
  overflow: hidden;
}

::selection { background: var(--sel); color: var(--fg); }

/* ---- terminal surface ---- */
#term-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 28px 18px;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #21262d transparent;
}
#term-scroll::-webkit-scrollbar { width: 8px; }
#term-scroll::-webkit-scrollbar-thumb { background: #21262d; }

.tl {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  min-height: 1.4em;
}

#term-in { white-space: pre-wrap; overflow-wrap: break-word; }

/* ---- mobile keyboard proxy (invisible, captures virtual keyboard) ---- */
#kbd-proxy {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: transparent;
}

/* ---- ANSI palette ---- */
.c-fg { color: var(--fg); }
.c-grn { color: var(--grn); }
.c-red { color: var(--red); }
.c-yel { color: var(--yel); }
.c-cyn { color: var(--cyn); }
.c-blu { color: var(--blu); }
.c-mag { color: var(--mag); }
.c-dim { color: var(--dim); }
.c-bold { font-weight: 700; }

.stderr { color: var(--red); }
.stderr .c-dim { color: var(--dim); }
.stderr .c-cyn { color: var(--cyn); }
.whisper { opacity: 0.85; }

/* ---- cursor ---- */
.cursor {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  animation: cursor-blink 1.06s steps(1) infinite;
  margin-right: -1px;
}
@keyframes cursor-blink {
  0%, 49% { background: var(--fg); color: var(--bg); }
  50%, 100% { background: transparent; color: inherit; }
}

/* ---- CRT scanlines (the one texture) ---- */
#scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.22) 0px,
    rgba(0, 0, 0, 0.22) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: var(--crt-op);
  transition: opacity 2.8s ease;
  z-index: 5;
}
/* when the final flag is submitted, the tube quiets down */
body.released #scanlines { opacity: 0; }

/* ---- crash-recovery glitch: 2-3 frames at load, then nothing ---- */
@media (prefers-reduced-motion: no-preference) {
  body.glitch-in #term-scroll {
    animation: glitch-in 0.25s steps(3, end) 1;
  }
  body.glitch-in #scanlines {
    animation: glitch-flash 0.25s steps(3, end) 1;
  }
}
@keyframes glitch-in {
  0%   { transform: translateX(-7px) scaleY(1.04); filter: hue-rotate(18deg) brightness(1.6); }
  33%  { transform: translateX(5px)  scaleY(0.98); filter: hue-rotate(-12deg) brightness(0.7); }
  66%  { transform: translateX(-2px); filter: none; }
  100% { transform: none; filter: none; }
}
@keyframes glitch-flash {
  0%   { opacity: 0.9; }
  33%  { opacity: 0.1; }
  66%  { opacity: var(--crt-op); }
  100% { opacity: var(--crt-op); }
}

@media (max-width: 720px) {
  body { font-size: 13px; }
  #term-scroll { padding: 10px 10px 22px 10px; }
}