* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0f0a;
  --fg: #39ff14;
  --fg-dim: #1f9d0f;
  --amber: #ffb000;
  --red: #ff003c;
  --cyan: #00e5ff;
}

html, body {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

body {
  background: #000;
  color: var(--fg);
  font-family: "VT323", "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.crt {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(ellipse at center, rgba(57, 255, 20, 0.08), transparent 70%),
    radial-gradient(ellipse at center, #0a0f0a 0%, #000 100%);
  overflow: hidden;
  animation: turnon 1.2s ease-out;
}

@keyframes turnon {
  0%   { transform: scale(1, 0.01); filter: brightness(3); opacity: 0; }
  40%  { transform: scale(1, 0.02); opacity: 1; }
  100% { transform: scale(1, 1); filter: brightness(1); }
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.25) 3px,
    rgba(0, 0, 0, 0.25) 3px
  );
  mix-blend-mode: multiply;
  z-index: 4;
}

.flicker {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(57, 255, 20, 0.03);
  animation: flicker 2.4s infinite steps(6);
  z-index: 3;
}

@keyframes flicker {
  0%, 100% { opacity: 0.95; }
  20%      { opacity: 0.8; }
  40%      { opacity: 1; }
  60%      { opacity: 0.85; }
  80%      { opacity: 0.92; }
}

.term {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: clamp(12px, 4vh, 48px) clamp(14px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vh, 22px);
  text-shadow:
    0 0 2px rgba(57, 255, 20, 0.8),
    0 0 8px rgba(57, 255, 20, 0.4),
    0 0 18px rgba(57, 255, 20, 0.25);
}

.ascii {
  font-family: "Menlo", "Courier New", monospace;
  font-size: clamp(5px, 1.5vw, 14px);
  line-height: 1.1;
  color: var(--fg);
  white-space: pre;
  letter-spacing: 0;
  opacity: 0.95;
  animation: rgb-split 3s infinite;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}

.ascii::-webkit-scrollbar { display: none; }

.ascii-txt {
  font-family: "Menlo", "Courier New", monospace;
  font-size: clamp(9px, 1.1vw, 13px);
  line-height: 1.45;
  color: var(--fg-dim);
  opacity: 0.88;
  word-break: break-all;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@keyframes rgb-split {
  0%, 100% {
    text-shadow:
      0 0 2px rgba(57, 255, 20, 0.9),
      1px 0 rgba(255, 0, 60, 0.35),
      -1px 0 rgba(0, 229, 255, 0.35);
  }
  50% {
    text-shadow:
      0 0 3px rgba(57, 255, 20, 0.9),
      2px 0 rgba(255, 0, 60, 0.55),
      -2px 0 rgba(0, 229, 255, 0.55);
  }
}

.glitch {
  position: relative;
  font-size: clamp(22px, 6vw, 56px);
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--fg);
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  margin-top: 2px;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.glitch::before {
  color: var(--red);
  animation: glitch-top 2.4s infinite steps(2, end);
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-2px, -1px);
}

.glitch::after {
  color: var(--cyan);
  animation: glitch-bot 3.1s infinite steps(2, end);
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  transform: translate(2px, 1px);
}

@keyframes glitch-top {
  0%, 92%, 100% { transform: translate(-2px, -1px); }
  93%           { transform: translate(-6px, -2px) skewX(-10deg); }
  95%           { transform: translate(4px, 1px) skewX(8deg); }
  97%           { transform: translate(-3px, 0); }
}

@keyframes glitch-bot {
  0%, 88%, 100% { transform: translate(2px, 1px); }
  89%           { transform: translate(6px, 2px) skewX(10deg); }
  92%           { transform: translate(-4px, -1px) skewX(-8deg); }
  95%           { transform: translate(3px, 0); }
}

.meta {
  display: flex;
  gap: clamp(10px, 2vw, 22px);
  flex-wrap: wrap;
  align-items: center;
  font-size: clamp(11px, 1.2vw, 16px);
  color: var(--fg-dim);
}

.meta b { color: var(--fg); font-weight: 400; }
.meta .ok { color: var(--amber); }

.meta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 1.5vw, 10px);
  margin-left: auto;
}

.meta-sublink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.meta-sublink svg {
  width: 1em;
  height: 1em;
  display: block;
  flex-shrink: 0;
}

.x-link {
  color: var(--cyan);
  border-color: rgba(0, 229, 255, 0.35);
}

.x-link:hover,
.x-link:focus-visible {
  background: rgba(0, 229, 255, 0.12);
  color: #fff;
  border-color: var(--cyan);
  outline: none;
}

.buy-link {
  color: var(--amber);
  border-color: rgba(255, 176, 0, 0.45);
  font-weight: 600;
}

.buy-link:hover,
.buy-link:focus-visible {
  background: rgba(255, 176, 0, 0.12);
  color: #fff;
  border-color: var(--amber);
  outline: none;
}

.tg-link {
  color: #7ab8ff;
  border-color: rgba(122, 184, 255, 0.4);
}

.tg-link:hover,
.tg-link:focus-visible {
  background: rgba(122, 184, 255, 0.12);
  color: #fff;
  border-color: #7ab8ff;
  outline: none;
}

@media (max-width: 640px) {
  .meta-links { margin-left: 0; width: 100%; }
}

.boot {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: clamp(11px, 1.15vw, 15px);
  line-height: 1.5;
  color: var(--fg);
  opacity: 0.92;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--fg-dim) transparent;
}

.boot::-webkit-scrollbar { width: 4px; }
.boot::-webkit-scrollbar-thumb { background: var(--fg-dim); }

.boot .ok  { color: var(--fg); }
.boot .wrn { color: var(--amber); }
.boot .err { color: var(--red); }
.boot .dim { color: var(--fg-dim); }

.prompt {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(12px, 1.2vw, 17px);
  padding-top: 4px;
}

.ps1 { color: var(--amber); white-space: nowrap; }
.cmd { color: var(--fg); word-break: break-word; }

.caret {
  color: var(--fg);
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (max-width: 640px) {
  .ascii { font-size: clamp(4.5px, 2.1vw, 10px); }
  .term { gap: 10px; }
}

@media (max-width: 380px) {
  .ascii { font-size: 4.4px; line-height: 1.05; }
}

@media (orientation: landscape) and (max-height: 500px) {
  .term { padding: 10px 18px; gap: 6px; }
  .ascii { font-size: clamp(5px, 1.1vh, 10px); }
  .glitch { font-size: clamp(18px, 4vh, 34px); }
}

@media (prefers-reduced-motion: reduce) {
  .crt { animation: none; }
  .flicker, .ascii, .glitch::before, .glitch::after { animation: none; }
}