/* ===============================
   GLOBAL BASE
================================ */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,255,140,.08), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(0,180,90,.06), transparent 45%),
    linear-gradient(180deg, #020805 0%, #000402 100%);
  font-family: monospace;
  color: #b7ffd9;
  overflow-y: auto; /* ENABLE SCROLL */
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  text-shadow: 0 0 6px rgba(0,255,140,.15);
}

/* subtle noise */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.04'/></svg>");
  pointer-events: none;
  z-index: 1;
}

/* scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,255,120,0.04),
      rgba(0,255,120,0.04) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9;
  animation: scanMove 8s linear infinite;
}

@keyframes scanMove {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

/* ===============================
   CORE PANEL
================================ */

.core-panel {
  position: relative;
  width: 720px;
  max-width: 90%;
  min-height: 420px;
  margin: 2vh auto;
  padding: 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5,15,10,.92), rgba(0,5,2,.96));
  box-shadow: 0 0 40px rgba(0,255,120,.12), inset 0 0 60px rgba(0,255,100,.05);
  border: 1px solid rgba(0,255,140,.18);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  z-index: 5;
  animation: bootIn 1.4s cubic-bezier(.16,.84,.44,1) forwards;
  transform-origin: center;
  opacity: 0;
}

@keyframes bootIn {
  0%   { opacity: 0; transform: scale(.92) translateY(20px); filter: blur(10px); }
  60%  { opacity: 1; transform: scale(1.02); filter: blur(2px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.core-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  font-family: monospace;
  color: #00ff9c;
  letter-spacing: 2px;
  font-size: 14px;
}

.core-header .blink {
  color: #6bffb3;
  animation: blink 1.4s infinite;
}

@keyframes blink {
  0%,100% {opacity: 1;}
  50% {opacity: .25;}
}


/* ===============================
   DECRYPT TERMINAL
================================ */

#terminalTextWrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 30px 0;
  z-index: 10;
  pointer-events: none;
}

#terminalGlass {
  width: min(760px, 92%);
  height: 100px;  
  padding: 10px; 
  border-radius: 10px;

  background:
    radial-gradient(140% 200% at 10% 10%, rgba(0,255,140,0.14), transparent 40%),
    linear-gradient(180deg, rgba(5,18,12,.85), rgba(1,6,4,.95));

  border: 1px solid rgba(0,255,140,.25);
  box-shadow:
    0 0 22px rgba(0,255,120,.18),
    inset 0 0 25px rgba(0,255,120,.12);

  overflow: hidden;
  position: relative;
}

/*TERMINAL HEADER*/
.terminal-content {
  font-family: "JetBrains Mono", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.4;
  color: #00ff8c;

  white-space: pre-wrap;
  word-break: break-word;

  direction: ltr;            
  text-align: left;

  margin: 0;
  text-shadow: 0 0 8px rgba(0,255,140,.45);
}


#terminalGlass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,255,140,.04),
    transparent
  );
  animation: scanline 4s linear infinite;
  pointer-events: none;
}

@keyframes scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

/* ===============================
   MATRIX HEADER (CLEAN)
================================ */

.matrix-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.matrix-box {
  width: 680px;
  max-width: 92%;
  height: 160px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(6,20,14,.9), rgba(1,6,4,.95));
  border: 1px solid rgba(0,255,140,.25);
  box-shadow:
    0 0 18px rgba(0,255,120,.25),
    inset 0 0 25px rgba(0,255,120,.08);
  display: flex;
  align-items: center;
}

.matrix-text {
  width: 100%;
  color: #00ff9c;
  font-family: Consolas, monospace;
  font-size: 13px;
  line-height: 1.35;
  white-space: pre;
  margin: 0;
  text-align: left;
  overflow: hidden;
}


/* ===============================
   TERMINAL CURSOR
================================ */

#cursor {
  width: clamp(0px, 0vw, 1px);
  height: 1.3em;
}

/* ===============================
   GLITCH EFFECT
================================ */

.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  width: 100%;
  opacity: .6;
  pointer-events: none;
}

.glitch::before {
  transform: translate(1px, -1px);
  color: #00ff9c;
  clip-path: inset(0 0 60% 0);
  animation: glitch1 2.8s infinite linear alternate-reverse;
}

.glitch::after {
  transform: translate(-1px, 1px);
  color: #6bffb3;
  clip-path: inset(40% 0 0 0);
  animation: glitch2 3.4s infinite linear alternate-reverse;
}

@keyframes glitch1 {
  0% { clip-path: inset(0 0 80% 0); }
  50% { clip-path: inset(10% 0 40% 0); }
  100% { clip-path: inset(0 0 60% 0); }
}

@keyframes glitch2 {
  0% { clip-path: inset(50% 0 0 0); }
  50% { clip-path: inset(20% 0 30% 0); }
  100% { clip-path: inset(40% 0 0 0); }
}
  
/* ===============================
   CONTENT SYSTEM (POST / CONFIG)
================================ */

.content-box {
  width: 100%;
  background: rgba(0, 10, 6, 0.75);
  border: 1px solid rgba(0,255,140,.14);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 10px;
  box-shadow: inset 0 0 18px rgba(0,255,120,.05);
}


.content-text {
  font-family: Tahoma, monospace;
  font-size: 14px;
  line-height: 1.9;
  color: #caffea;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: break-word;
  direction: rtl;
  text-align: right;
  text-shadow: none;
}


.content-title {
  font-size: 13px;
  letter-spacing: 2px;
  color: #00ff9c;
  margin-bottom: 10px;
  opacity: .8;
}


.config-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(0, 20, 10, .55);
  border: 1px solid rgba(0,255,130,.12);
  transition: .25s;
}

.config-item:hover {
  background: rgba(0, 40, 20, .85);
  box-shadow: 0 0 14px rgba(0,255,140,.18);
}


.config-title {
  font-size: 14px;
  color: #6bffb3;
}


.config-btn {
  align-self: flex-start;
  background: linear-gradient(180deg,#001a0d,#000);
  color: #00ff9c;
  border: 1px solid #00ff9c;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: monospace;
  transition: .2s;
}

.config-btn:hover {
  background: #00ff9c;
  color: #001a0d;
  box-shadow: 0 0 10px rgba(0,255,140,.6);
}

/*
POST LIST
*/
.post-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: rgba(0,20,10,.6);
  border: 1px solid rgba(0,255,130,.12);
  color: #b7ffd9;
  font-family: monospace;
  cursor: pointer;
  transition: all .25s ease;
  position: relative;
}

.post-item:hover {
  background: rgba(0,40,20,.85);
  box-shadow: 0 0 18px rgba(0,255,140,.18);
  transform: translateX(6px);
}

.post-item::before {
  content: "›";
  position: absolute;
  left: 8px;
  color: #00ff9c;
}