/* ==========================================
   MORTIS ARCHIVE — MASTER STYLE (MOBILE UPGRADE)
   ========================================== */

:root {
  --bg: #050505;
  --panel: #0d0d0d;
  --text: #e4e4e4;
  --dim: #9a9a9a;
  --accent: #b52a2a;
  --border: rgba(255,255,255,0.10);
  --glow: rgba(255,255,255,0.05);
  --danger: #d14a4a;
  --success: #3cb063;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Consolas, Monaco, monospace;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

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

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

.panel {
  background: rgba(13,13,13,0.96);
  border: 1px solid var(--border);
  padding: 30px;
  box-shadow:
    0 0 40px var(--glow),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  position: relative;
}

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

.failure {
  border-color: rgba(181,42,42,0.35);
}

/* ==========================================
   PANEL SHOCK
   ========================================== */

.panel.shock {
  animation: shockPulse 420ms ease;
  border-color: rgba(181,42,42,0.50);
  box-shadow:
    0 0 42px rgba(181,42,42,0.18),
    0 0 10px rgba(181,42,42,0.12),
    0 0 40px var(--glow);
}

@keyframes shockPulse {
  0%   { transform: translateY(0); filter: brightness(1); }
  20%  { transform: translateY(-1px); filter: brightness(1.06); }
  45%  { transform: translateY(0); filter: brightness(0.94); }
  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;
  line-height: 1.5;
}

.strong {
  font-weight: bold;
  font-size: 16px;
}

.dim {
  color: var(--dim);
}

.sig {
  font-size: 12px;
  letter-spacing: 1px;
}

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

.input {
  width: 100%;
  padding: 12px 13px;
  background: #090909;
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text);
  outline: none;
  font-family: inherit;
  font-size: 15px;
  transition: 0.2s ease;
  border-radius: 0;
}

.input::placeholder {
  color: rgba(255,255,255,0.30);
}

.input:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(181,42,42,0.20),
    0 0 10px rgba(181,42,42,0.30);
}

.btn {
  width: 100%;
  padding: 12px;
  background: #141414;
  color: #f0f0f0;
  border: 1px solid rgba(255,255,255,0.14);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  transition: 0.2s ease;
}

.btn:hover {
  border-color: var(--accent);
  color: #fff;
  background: #1a1a1a;
  box-shadow: 0 0 10px rgba(181,42,42,0.10);
}

.btn-ghost {
  width: 100%;
  padding: 12px;
  background: transparent;
  color: rgba(255,255,255,.78);
  border: 1px dashed rgba(255,255,255,.20);
  cursor: pointer;
  transition: 0.2s ease;
  font-family: inherit;
  font-size: 14px;
}

.btn-ghost:hover {
  border-color: rgba(255,255,255,.35);
  color: rgba(255,255,255,.96);
  background: rgba(255,255,255,0.02);
}

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

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

.msg.err {
  color: var(--danger);
  text-shadow: 0 0 6px rgba(209,74,74,0.35);
  animation: msgPulse 1.6s ease-in-out infinite;
}

.msg.ok {
  color: var(--success);
  text-shadow: 0 0 6px rgba(60,176,99,0.35);
}

@keyframes msgPulse {
  0% { text-shadow: 0 0 4px rgba(209,74,74,0.2); }
  50% { text-shadow: 0 0 10px rgba(209,74,74,0.6); }
  100% { text-shadow: 0 0 4px rgba(209,74,74,0.2); }
}

.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,.20),
    transparent
  );
}

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

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

.mortis-title {
  font-size: 34px;
  letter-spacing: 6px;
  font-weight: bold;
  position: relative;
  display: inline-block;
  color: #ededed;
  text-transform: uppercase;
  user-select: none;
  text-shadow: 0 0 10px rgba(255,255,255,0.05);
}

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

.mortis-title::before {
  color: rgba(181,42,42,0.70);
  transform: translate(1px, 0);
}

.mortis-title::after {
  color: rgba(181,42,42,0.28);
  transform: translate(-1px, 0);
}

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

.mortis-corrupt {
  text-shadow:
    0 0 6px rgba(255,255,255,0.22),
    0 0 18px rgba(181,42,42,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;
  overflow-x: hidden;
  overflow-y: auto;
}

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

.fx-scanlines {
  opacity: .08;
  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,.48) 72%,
    rgba(0,0,0,.84) 100%
  );
  opacity: .85;
}

.fx-noise {
  opacity: .03;
  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: .88; }
  98% { opacity: 1; }
  99% { opacity: .94; }
  100% { opacity: 1; }
}

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

@media (max-width: 600px) {
  .wrap {
    margin: 28px auto;
    padding: 0 14px;
  }

  .panel {
    padding: 20px 16px;
  }

  .mortis-header {
    margin-bottom: 26px;
  }

  .mortis-title {
    font-size: 28px;
    letter-spacing: 4px;
    line-height: 1.1;
  }

  .mortis-sub {
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.72);
  }

  .mono {
    font-size: 15px;
    line-height: 1.55;
  }

  .strong {
    font-size: 17px;
  }

  .sig {
    font-size: 11px;
  }

  .input,
  .btn,
  .btn-ghost {
    font-size: 15px;
    padding: 13px 12px;
  }

  .divider {
    margin: 18px 0;
  }

  .fx-vignette {
    opacity: .72;
  }

  .fx-noise {
    opacity: .02;
  }

  .fx-scanlines {
    opacity: .05;
  }
}