/* ============================================================
   PROTOCOLE VESTALE — feuille de style du terminal
   Un seul écran, aucune interface graphique : tout est du texte.
   ============================================================ */

:root {
  --bg: #050706;
  --screen-bg: #080c0a;
  --fg: #9ff5c0;
  --fg-dim: #4e8a68;
  --fg-bright: #d6ffe6;
  --accent: #7ef7b0;
  --warn: #ffd479;
  --danger: #ff8f7a;
  --info: #79d6ff;
  --secret: #d7a3ff;
  --rule: #16241c;
  --glow: 0 0 6px rgba(126, 247, 176, 0.28);
  --font: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --fs: 15px;
  --lh: 1.5;
}

body[data-theme="amber"] {
  --screen-bg: #0c0803;
  --fg: #ffcf8a;
  --fg-dim: #9a6c30;
  --fg-bright: #ffe9c4;
  --accent: #ffb454;
  --warn: #ffe08a;
  --danger: #ff9166;
  --info: #ffd9a0;
  --secret: #ffc0f0;
  --rule: #2a1c08;
  --glow: 0 0 6px rgba(255, 180, 84, 0.26);
}

body[data-theme="slate"] {
  --screen-bg: #0a0d11;
  --fg: #cdd9e5;
  --fg-dim: #64798f;
  --fg-bright: #ffffff;
  --accent: #8ab4f8;
  --warn: #f5c86b;
  --danger: #f38375;
  --info: #7fd0e8;
  --secret: #c4a7f5;
  --rule: #1b2430;
  --glow: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  overflow: hidden;
}

.frame {
  position: relative;
  height: 100%;
  padding: clamp(0px, 1.2vmin, 18px);
  background:
    radial-gradient(120% 90% at 50% 0%, #0d1310 0%, #040605 60%, #000 100%);
}

.bezel {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--screen-bg);
  overflow: hidden;
}

/* ---------- barre de titre ---------- */
.titlebar {
  display: flex;
  align-items: center;
  gap: .7ch;
  padding: .35rem .8rem;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-dim);
  font-size: .82em;
  letter-spacing: .06em;
  text-transform: uppercase;
  user-select: none;
}
.tb-dot {
  width: .6ch; height: .6ch; border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
  animation: pulse 3.4s ease-in-out infinite;
}
.tb-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-right { color: var(--fg-dim); opacity: .8; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- écran ---------- */
.screen {
  overflow-y: auto;
  overflow-x: hidden;
  padding: .9rem clamp(.7rem, 2.5vw, 2.2rem) 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  text-shadow: var(--glow);
  outline: none;
}
.screen::-webkit-scrollbar { width: 9px; }
.screen::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 9px; }

.out { white-space: pre-wrap; overflow-wrap: anywhere; }
.out > div { min-height: 1.2em; }

/* ---------- classes de sortie ---------- */
.c-dim      { color: var(--fg-dim); }
.c-bright   { color: var(--fg-bright); }
.c-accent   { color: var(--accent); }
.c-warn     { color: var(--warn); }
.c-danger   { color: var(--danger); }
.c-info     { color: var(--info); }
.c-secret   { color: var(--secret); }
.c-cmd      { color: var(--fg-bright); }
.c-rule     { color: var(--rule); }
.c-dir      { color: var(--info); font-weight: 600; }
.c-exec     { color: var(--accent); }
.c-locked   { color: var(--fg-dim); }
.c-mail     { color: var(--fg-bright); }
.c-title    {
  color: var(--fg-bright);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.c-banner   { color: var(--accent); }
.c-quote    { color: var(--fg-dim); font-style: italic; }
.c-ending   { color: var(--secret); letter-spacing: .08em; }

/* L'effet de frappe vient de l'ordre d'arrivée des lignes, pas d'une
   animation d'opacité : une ligne déjà écrite ne doit jamais pouvoir
   rester invisible, quel que soit le moteur de rendu. */

/* Aucun style en ligne dans le HTML : la page doit rester servie sous
   une CSP stricte, sans 'unsafe-inline'. */
.noscript {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 2rem;
  color: var(--accent);
  background: var(--screen-bg);
}

/* ---------- ligne de saisie ---------- */
.inputline { display: flex; align-items: baseline; gap: 0; margin-top: .1rem; }
.prompt { white-space: pre; color: var(--accent); text-shadow: var(--glow); }
.field { flex: 1; min-width: 4ch; }

#input {
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--fg-bright);
  font: inherit;
  line-height: inherit;
  caret-color: var(--accent);
  outline: none;
  text-shadow: var(--glow);
}
#input::selection { background: var(--fg-dim); color: var(--screen-bg); }

/* ---------- barre d'état ---------- */
.statusbar {
  display: flex;
  gap: 1.5ch;
  justify-content: space-between;
  padding: .3rem .9rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-dim);
  font-size: .8em;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.statusbar b { color: var(--fg); font-weight: 500; }
.statusbar .alert { color: var(--danger); }

/* ---------- effets CRT ---------- */
.scanlines, .glare { position: absolute; inset: 0; pointer-events: none; }
.scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, .22) 3px,
    rgba(0, 0, 0, .22) 4px);
  mix-blend-mode: multiply;
  opacity: .55;
}
.glare {
  background:
    radial-gradient(65% 45% at 50% -10%, rgba(255, 255, 255, .06), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
body[data-crt="off"] .scanlines,
body[data-crt="off"] .glare { display: none; }

body[data-theme="slate"] .scanlines { opacity: .25; }

/* ---------- écrasement de l'écran (fins) ---------- */
body[data-mode="ending"] .titlebar .tb-dot { background: var(--secret); }

@media (prefers-reduced-motion: reduce) {
  .tb-dot { animation: none; }
}

@media (max-width: 640px) {
  :root { --fs: 13px; }
  .frame { padding: 0; }
  .bezel { border: 0; border-radius: 0; }
}