/* Outpost Court Record — standalone */
:root{
  --bg: #050505;
  --panel: rgba(10, 10, 10, 0.70);
  --ink: #ff2b2b;
  --muted: #b71c1c;
  --border: rgba(255, 43, 43, 0.35);
  --grid: rgba(255, 43, 43, 0.08);
  --shadow: rgba(0,0,0,0.6);
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'VT323', ui-monospace, monospace;
  letter-spacing:0.2px; overflow:hidden;
}
.mono{ font-family:'VT323', ui-monospace, monospace; }
.dim{ color:var(--muted); }

.bg-matrix{ position:fixed; inset:0; width:100vw; height:100vh; opacity:0.12; mix-blend-mode:screen; pointer-events:none; }

.screen{ position:relative; height:100%; padding:clamp(14px,2.5vw,28px); display:flex; flex-direction:column; gap:14px; }
.scan{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(255,43,43,0.030), rgba(255,43,43,0.030) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
  opacity:0.30;
}
.hud{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; text-transform:uppercase; font-size:clamp(18px,2.0vw,22px); }
.hud__line{ line-height:1.05; }
.hud__right{ text-align:right; min-width:180px; }
.hud__kv{ line-height:1.05; }

.card{
  border:1px solid var(--border); border-radius:14px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(255,43,43,0.06), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.55)),
    repeating-linear-gradient(to right, var(--grid), var(--grid) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(to bottom, var(--grid), var(--grid) 1px, transparent 1px, transparent 28px),
    var(--panel);
  box-shadow:0 18px 60px var(--shadow);
}

.terminal{ flex:1; padding:16px 16px 12px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.log{
  flex:1; overflow:auto; padding-right:10px;
  scrollbar-color:rgba(255,43,43,0.35) transparent; scrollbar-width:thin;
  font-size:clamp(20px,2.2vw,26px); line-height:1.15; white-space:pre-wrap;
}
.log::-webkit-scrollbar{ width:10px; }
.log::-webkit-scrollbar-thumb{ background:rgba(255,43,43,0.25); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
.log::-webkit-scrollbar-track{ background:transparent; }

.line{ margin:0 0 6px 0; }
.rule{ margin:10px 0; height:1px; background:linear-gradient(to right, transparent, var(--border), transparent); }

.prompt{ display:flex; align-items:center; gap:10px; font-size:clamp(20px,2.2vw,26px); line-height:1.1; }
.caret{ width:10px; height:1em; background:var(--ink); opacity:0.75; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.kbd{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.hint{ font-size:clamp(16px,1.7vw,20px); line-height:1.1; }

kbd{ padding:0 6px; border:1px solid var(--border); border-radius:8px; background:rgba(255,43,43,0.07); color:var(--ink); }

.foot{ display:flex; justify-content:space-between; align-items:center; font-size:clamp(16px,1.6vw,20px); }

.wave{ display:block; width:min(520px,100%); height:56px; margin:6px 0 8px; opacity:0.9; }
.wave path{ stroke:var(--ink); stroke-width:2; fill:none; filter:drop-shadow(0 0 6px rgba(255,43,43,0.25)); }

.glitch{ text-shadow:0 0 10px rgba(255,43,43,0.18), 0 0 18px rgba(255,43,43,0.10); }

.hud__sig{
  display: block;
  align-self: flex-start;   /* overrides centering */
  margin: 8px 0 0 0;        /* NO auto margins */
  width: 96px;              /* ~80% smaller and predictable */
  height: auto;
  opacity: 0.25;
  filter: drop-shadow(0 0 12px rgba(255,43,43,0.25));
  pointer-events: none;
}


/* Relic Codex additions */
.svgwrap{
  padding: 0;
  border: none;
  margin: 16px 0;
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,.25);
}
.asciiSvg{
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  opacity: .95;
}
