@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");

:root {
  --crash-bg: #0a3452;
  --crash-bg-dark: #061d2d;
  --crash-text: #f4f7f9;
  --crash-muted: #c4d6e1;
  --crash-gold: #e2bf58;
  --crash-green: #85f0a4;
  --crash-red: #ff918c;
  --scanline: rgba(255,255,255,.035);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--crash-text);
  font-family: "Special Elite", "Courier New", monospace;
  background:
    radial-gradient(circle at 70% 12%, rgba(255,255,255,.055), transparent 23%),
    linear-gradient(rgba(4,24,38,.1), rgba(4,24,38,.22)),
    var(--crash-bg);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      var(--scanline) 3px,
      transparent 4px
    );
  opacity: .5;
  mix-blend-mode: screen;
  animation: crtFlicker 6s infinite;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 21;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 58%, rgba(0,0,0,.18) 100%);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.38),
    inset 0 0 12px rgba(130,220,255,.08);
}

button,
a {
  font: inherit;
}

.crash-screen {
  min-height: 100vh;
  padding: clamp(34px, 6vw, 88px) clamp(24px, 6vw, 88px);
  display: grid;
  align-items: start;
  position: relative;
  z-index: 2;
}

.crash-inner {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.boot-header {
  min-height: 86px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  color: var(--crash-muted);
  font-family: "Courier New", monospace;
}

.boot-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.boot-mark {
  color: var(--crash-gold);
  font-size: 1.45rem;
  line-height: 1;
}

.boot-brand p {
  margin: 0 0 8px;
  color: var(--crash-text);
  font-size: clamp(.8rem, 1.6vw, 1rem);
  letter-spacing: .18em;
}

.boot-brand span {
  font-size: .92rem;
}

.boot-loader {
  min-width: 240px;
  text-align: right;
  font-size: .88rem;
}

.loading-dots::after {
  content: "";
  animation: loadingDots 1.2s steps(4) infinite;
}

.boot-failed {
  color: var(--crash-red);
}

.crash-separator {
  height: 1px;
  margin: 0 0 clamp(52px, 8vh, 96px);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.8),
    rgba(255,255,255,.18) 72%,
    transparent
  );
}

.fatal-heading {
  max-width: 950px;
}

.fatal-kicker {
  margin: 0 0 28px;
  color: var(--crash-gold);
  font-family: "Courier New", monospace;
  font-size: .95rem;
  letter-spacing: .18em;
  opacity: .75;
}

.crash-face {
  margin: 0 0 24px;
  font-family: "Courier New", monospace;
  font-size: clamp(5.5rem, 12vw, 9.5rem);
  font-weight: 300;
  line-height: .82;
}

.crash-title {
  max-width: 930px;
  margin: 0;
  font-size: clamp(2rem, 4.3vw, 3.7rem);
  line-height: 1.15;
  font-weight: 400;
}

.crash-subtitle {
  max-width: 880px;
  margin: 22px 0 44px;
  color: var(--crash-muted);
  font-family: "Courier New", monospace;
  font-size: clamp(1rem, 1.8vw, 1.22rem);
  line-height: 1.7;
}

.progress-wrap {
  max-width: 790px;
  margin: 0 0 44px;
}

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 11px;
  color: var(--crash-green);
  font-family: "Courier New", monospace;
}

.progress-track {
  height: 15px;
  border: 1px solid rgba(255,255,255,.62);
  background: rgba(0,0,0,.22);
  overflow: hidden;
}

.progress-fill {
  width: 0;
  height: 100%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--crash-green) 0 15px,
      #53bc76 16px 19px
    );
  transition: width .5s steps(5);
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr);
  gap: 38px;
  align-items: start;
}

.diagnostic-block,
.incident-block {
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.38);
}

.diagnostic-block p,
.incident-block p {
  margin: 0 0 12px;
  color: var(--crash-muted);
  font-family: "Courier New", monospace;
  font-size: .96rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.diagnostic-block strong,
.incident-block strong {
  color: var(--crash-text);
}

.stop-code {
  color: var(--crash-gold) !important;
}

.eerie-line,
.incident-warning {
  min-height: 1.5em;
  color: var(--crash-red) !important;
}

.incident-image{
    width:170px;
    margin-bottom:18px;
    padding:6px;
    background:#f4f7f9;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.15),
        0 8px 18px rgba(0,0,0,.25);
}

.incident-image img{
    display:block;
    width:100%;
    height:auto;
    image-rendering:pixelated;
}

.crash-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  color: var(--crash-muted);
  font-family: "Courier New", monospace;
  font-size: .95rem;
}

.crash-actions button,
.crash-actions a {
  padding: 0;
  border: 0;
  color: var(--crash-text);
  background: transparent;
  text-decoration: underline;
  cursor: pointer;
}

.crash-actions button:hover,
.crash-actions a:hover {
  color: var(--crash-gold);
}

.glitch-message {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  min-width: min(560px, calc(100vw - 32px));
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.45);
  color: var(--crash-red);
  background: rgba(4,19,29,.92);
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.glitch-strip {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 30;
  height: 2px;
  pointer-events: none;
  background: rgba(181,239,255,.28);
  opacity: 0;
}

.glitch-strip-one {
  top: 31%;
  animation: randomStrip 11s infinite;
}

.glitch-strip-two {
  top: 69%;
  animation: randomStrip 17s 3s infinite;
}

.is-hidden {
  display: none !important;
}

.subtle-glitch {
  animation: subtleGlitch .18s steps(2) 1;
}

.screen-glitch {
  animation: screenGlitch .42s steps(2) 1;
}

@keyframes loadingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

@keyframes crtFlicker {
  0%, 100% { opacity: .48; }
  47% { opacity: .54; }
  48% { opacity: .3; }
  49% { opacity: .62; }
  51% { opacity: .47; }
}

@keyframes subtleGlitch {
  0% { transform: translate(0); filter: none; }
  35% { transform: translate(-2px, 0); filter: contrast(1.15); }
  70% { transform: translate(2px, 1px); }
  100% { transform: translate(0); filter: none; }
}

@keyframes screenGlitch {
  0% { transform: translate(0); filter: none; }
  20% { transform: translate(-6px, 1px); filter: hue-rotate(10deg); }
  40% { transform: translate(7px, -2px); }
  60% { transform: translate(-3px, 0); filter: contrast(1.38); }
  80% { transform: translate(2px, 1px); }
  100% { transform: translate(0); filter: none; }
}

@keyframes randomStrip {
  0%, 91%, 100% {
    opacity: 0;
    transform: translateX(0);
  }

  92% {
    opacity: .8;
    transform: translateX(-4%);
  }

  93% {
    opacity: .25;
    transform: translateX(7%);
  }

  94% {
    opacity: 0;
    transform: translateX(0);
  }
}

@media (max-width: 760px) {
  body {
    overflow-y: auto;
  }

  .crash-screen {
    align-items: start;
    padding: 28px 20px 50px;
  }

  .boot-header {
    min-height: 120px;
    flex-direction: column;
    gap: 18px;
  }

  .boot-loader {
    min-width: 0;
    text-align: left;
  }

  .crash-separator {
    margin-bottom: 50px;
  }

  .diagnostic-grid {
    grid-template-columns: 1fr;
  }

  .fake-code {
    width: 120px;
  }
}


.crash-inner {
  padding-bottom: 48px;
}

html {
  scroll-behavior: smooth;
}