/* ==========================================
   MORTIS ARCHIVE — MASTER STYLE
   ========================================== */

:root {
  --bg: #050505;
  --panel: #0b0b0b;
  --text: #d6d6d6;
  --dim: #7a7a7a;
  --accent: #9c1f1f;
  --border: rgba(255,255,255,0.06);
  --glow: rgba(255,255,255,0.04);
  --danger: #a62828;
  --success: #1f7a3a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Consolas, Monaco, monospace;

  /* CHANGED: allow vertical scroll so long viewer content is readable */
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ==========================================
   LAYOUT
   ========================================== */

.wrap {
  max-width: 520px;
  margin: 80px auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 28px;
  box-shadow: 0 0 40px var(--glow);
  position: relative;
}

.panel-front {
  animation: microflicker 14s infinite;
}

.failure {
  border-color: rgba(255,0,0,0.2);
}

/* ==========================================
   PANEL SHOCK (NEW)
   ========================================== */
/* Trigger by adding .shock to the panel */
.panel.shock {
  animation: shockPulse 420ms ease;
  border-color: rgba(166,40,40,0.35);
  box-shadow:
    0 0 42px rgba(166,40,40,0.14),
    0 0 10px rgba(166,40,40,0.10),
    0 0 40px var(--glow);
}

@keyframes shockPulse {
  0%   { transform: translateY(0); filter: brightness(1); }
  20%  { transform: translateY(-1px); filter: brightness(1.05); }
  45%  { transform: translateY(0); filter: brightness(0.92); }
  70%  { transform: translateY(-1px); filter: brightness(1.02); }
  100% { transform: translateY(0); filter: brightness(1); }
}

/* ==========================================
   TEXT STYLES
   ========================================== */

.mono { font-size: 14px; letter-spacing: 0.5px; }
.strong { font-weight: bold; font-size: 16px; }
.dim { color: var(--dim); }
.sig { font-size: 12px; letter-spacing: 1px; }

/* ==========================================
   INPUTS + BUTTONS
   ========================================== */

.input {
  width: 100%;
  padding: 10px 12px;
  background: #000;
  border: 1px solid var(--border);
  color: var(--text);
  outline: none;
  font-family: inherit;
  font-size: 14px;
  transition: 0.2s ease;
}

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(156,31,31,0.4);
}

.btn {
  width: 100%;
  padding: 10px;
  background: #111;
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  transition: 0.2s ease;
}

.btn:hover {
  border-color: var(--accent);
  color: #fff;
  background: #151515;
}

.btn-ghost {
  width: 100%;
  padding: 10px;
  background: transparent;
  color: rgba(255,255,255,.65);
  border: 1px dashed rgba(255,255,255,.12);
  cursor: pointer;
  transition: 0.2s ease;
}

.btn-ghost:hover {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
}

/* ==========================================
   MESSAGE POLISH
   ========================================== */

.msg {
  margin-top: 16px;
  min-height: 20px;
  transition: all 0.25s ease;
}

/* Error state */
.msg.err {
  color: var(--danger);
  text-shadow: 0 0 6px rgba(166,40,40,0.35);
  animation: msgPulse 1.6s ease-in-out infinite;
}

/* Success state */
.msg.ok {
  color: var(--success);
  text-shadow: 0 0 6px rgba(31,122,58,0.35);
}

/* Subtle red pulse */
@keyframes msgPulse {
  0% { text-shadow: 0 0 4px rgba(166,40,40,0.2); }
  50% { text-shadow: 0 0 10px rgba(166,40,40,0.6); }
  100% { text-shadow: 0 0 4px rgba(166,40,40,0.2); }
}

/* Micro shake nudge (tiny) */
.msg.err::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1px;
  animation: msgShake 0.25s ease;
}

@keyframes msgShake {
  0% { transform: translateX(0px); }
  25% { transform: translateX(-1px); }
  50% { transform: translateX(1px); }
  75% { transform: translateX(-1px); }
  100% { transform: translateX(0px); }
}

/* ==========================================
   DIVIDER
   ========================================== */

.divider {
  height: 1px;
  margin: 22px 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );
}

/* ==========================================
   MORTIS HEADER
   ========================================== */

.mortis-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.mortis-title {
  font-size: 32px;
  letter-spacing: 6px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  color: #e0e0e0;
  text-transform: uppercase;
  user-select: none;
}

.mortis-title::before,
.mortis-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  pointer-events: none;
}

.mortis-title::before {
  color: rgba(156,31,31,0.6);
  transform: translate(1px, 0);
}

.mortis-title::after {
  color: rgba(156,31,31,0.3);
  transform: translate(-1px, 0);
}

.mortis-sub {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.45);
  text-transform: lowercase;
  user-select: none;
}

/* Used by heading enhancement (mortisState.js) */
.mortis-corrupt {
  text-shadow:
    0 0 6px rgba(255,255,255,0.22),
    0 0 18px rgba(156,31,31,0.35);
}

.mortis-sub--shift {
  animation: sub-shift .9s ease;
}

@keyframes sub-shift {
  0%   { opacity: 0.35; transform: translateY(1px); filter: blur(0.7px); }
  40%  { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 1; }
}

/* ==========================================
   ATMOSPHERIC FX
   ========================================== */

.front {
  position: relative;

  /* CHANGED: do NOT lock vertical scroll */
  overflow-x: hidden;
  overflow-y: auto;
}

.fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.fx-scanlines {
  opacity: .10;
  background: linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,0));
  background-size: 100% 6px;
  mix-blend-mode: overlay;
  animation: fx-scan 6s linear infinite;
}

@keyframes fx-scan {
  0% { transform: translateY(-20%); }
  100% { transform: translateY(20%); }
}

.fx-vignette {
  background: radial-gradient(
    circle at center,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.55) 70%,
    rgba(0,0,0,.92) 100%
  );
  opacity: .9;
}

.fx-noise {
  opacity: .04;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* ==========================================
   MICRO FLICKER
   ========================================== */

@keyframes microflicker {
  0% { opacity: 1; }
  96% { opacity: 1; }
  97% { opacity: .85; }
  98% { opacity: 1; }
  99% { opacity: .92; }
  100% { opacity: 1; }
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 600px) {
  .wrap { margin: 40px auto; }
  .panel { padding: 20px; }
}