/* ============================================
   MYCELIUM CRT — v14
   YouTube inside screen, footer pinned bottom,
   no JS style manipulation
   ============================================ */

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

:root {
  --green: #33ff33;
  --green-dim: #22aa22;
  --green-dark: #0a4f0a;
  --green-glow: rgba(51, 255, 51, 0.4);
  --orange: #ff6600;
  --orange-glow: rgba(255, 102, 0, 0.6);
  --phosphor-bg: #010801;
}

body {
  background: #000;
  color: var(--green);
  font-family: 'Courier New', 'Lucida Console', monospace;
  line-height: 1.5;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ---------- Power-On ---------- */
.crt-poweron {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: #fff;
  z-index: 9999;
  animation: poweron 0.8s ease-out forwards;
  pointer-events: none;
}
@keyframes poweron {
  0% { opacity: 1; } 10% { opacity: 0.8; }
  20% { opacity: 0; } 30% { opacity: 0.15; }
  50%, 100% { opacity: 0; }
}

/* ---------- CRT Frame ---------- */
.crt-frame {
  position: relative;
  z-index: 2;
  width: 96vw; height: 93vh;
  background: #1a1a18;
  border-radius: 30px;
  padding: 12px;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,.8),
    0 0 60px rgba(0,0,0,.9),
    0 4px 20px rgba(0,0,0,.6);
  border: 3px solid #222;
  border-top-color: #333;
  border-left-color: #2a2a2a;
}

/* ---------- CRT Screen ---------- */
.crt-screen {
  position: relative;
  width: 100%; height: 100%;
  background: var(--phosphor-bg);
  border-radius: 18px;
  overflow: hidden;
  overflow-y: auto;
  box-shadow:
    inset 0 0 80px rgba(0,30,0,.6),
    inset 0 0 200px rgba(0,10,0,.3),
    0 0 8px rgba(0,255,0,.05);
}
.crt-screen::-webkit-scrollbar { width: 6px; }
.crt-screen::-webkit-scrollbar-track { background: #010801; }
.crt-screen::-webkit-scrollbar-thumb { background: var(--green-dark); border-radius: 3px; }

/* ---------- YouTube Background (inside screen, absolute) ---------- */
.yt-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
}
.yt-bg iframe {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: 177.78vh;
  height: 56.25vw;
  transform: translate(-50%, -50%);
  border: none;
  opacity: 0.13;
}
/* Overlay blocks pointer events + hides play button if autoplay fails */
.yt-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: transparent;
  z-index: 1;
}
@media (max-aspect-ratio: 16/9) {
  .yt-bg iframe { width: 177.78vh; height: 100vh; }
}
@media (min-aspect-ratio: 16/9) {
  .yt-bg iframe { width: 100vw; height: 56.25vw; }
}

/* ---------- Scanlines ---------- */
.scanlines {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 1px,
    rgba(0,0,0,0.25) 1px, rgba(0,0,0,0.25) 2px
  );
  pointer-events: none;
  z-index: 10;
}
.scanlines::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 6px;
  background: linear-gradient(180deg, transparent, rgba(51,255,51,0.04), transparent);
  animation: scanbar 6s linear infinite;
  z-index: 11;
}
@keyframes scanbar { 0% { top: -6px; } 100% { top: 100%; } }

/* ---------- Phosphor Grid ---------- */
.phosphor-grid {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(circle, rgba(0,255,0,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 9;
}

/* ---------- Flicker ---------- */
.crt-flicker {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 8;
  animation: crt-flicker 0.05s infinite alternate;
}
@keyframes crt-flicker {
  0% { opacity: 0.97; background: transparent; }
  100% { opacity: 1; background: rgba(0,20,0,0.01); }
}

/* ---------- Vignette ---------- */
.crt-vignette {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.45) 85%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
  z-index: 12;
}

/* ---------- Noise ---------- */
.noise-layer {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 7;
  opacity: 0.06;
  mix-blend-mode: screen;
}

/* ---------- Pre-Header (scrolls with content) ---------- */
.pre-header {
  position: relative;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 16px;
  background: rgba(0, 6, 0, 0.92);
  border-bottom: 1px solid rgba(10,79,10,0.25);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--green-dark);
  font-family: 'Courier New', monospace;
  flex-shrink: 0;
}
.pre-header::after {
  content: "";
  position: absolute; bottom: -1px; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--green-dark) 20%, var(--green-dark) 80%, transparent 100%);
  opacity: 0.4;
}
.ph-left, .ph-center, .ph-right { display: flex; align-items: center; gap: 8px; }
.ph-classification {
  color: var(--orange); font-weight: bold;
  text-shadow: 0 0 4px var(--orange-glow);
  animation: class-blink 3s infinite;
}
@keyframes class-blink { 0%,85%,100%{opacity:1}90%{opacity:.3}95%{opacity:.8} }
.ph-sep { color: rgba(10,79,10,0.3); }
.ph-ref { color: var(--green-dark); }
.ph-file { color: var(--green-dark); letter-spacing: 3px; font-size: 9px; text-shadow: 0 0 3px rgba(0,80,0,.2); }
.ph-clock { color: var(--green-dim); font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgba(34,170,34,.3); }
.ph-status { color: var(--green-dark); }
.ph-dot { color: var(--green); text-shadow: 0 0 6px var(--green-glow); animation: dot-pulse 2s infinite; font-size: 8px; }
@keyframes dot-pulse { 0%,100%{opacity:1}50%{opacity:.3} }

/* ---------- Content ---------- */
.crt-content {
  position: relative;
  z-index: 3;
  max-width: 720px;
  width: 90%;
  margin: 0 auto;
  padding: 30px 20px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---------- Title (grey/white) ---------- */
.title-block { text-align: center; margin-top: 20px; margin-bottom: 25px; width: 100%; }
.title {
  font-size: 3.2em; letter-spacing: 10px; margin-bottom: 0;
  color: #d0d0d0; text-transform: uppercase; font-weight: bold;
  text-shadow: 0 0 7px rgba(255,255,255,0.3), 0 0 20px rgba(255,255,255,0.15), 0 0 40px rgba(255,255,255,0.05);
}
.title-line {
  width: 280px; max-width: 80%; height: 1px;
  background: rgba(200,200,200,0.5); margin: 10px auto 12px;
  box-shadow: 0 0 6px rgba(255,255,255,0.15), 0 0 12px rgba(255,255,255,0.08);
}
.subtitle { font-size: .95em; letter-spacing: 2px; color: #b0b0b0; font-style: italic; text-shadow: 0 0 5px rgba(255,255,255,0.15); }

/* ---------- Glitch (title only) ---------- */
.glitch { position: relative; animation: glitch-skew 4s infinite; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; pointer-events: none;
}
.glitch::before {
  color: #ff0040; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
  text-shadow: -2px 0 #ff0040;
}
.glitch::after {
  color: #00fff0; z-index: -2;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
  text-shadow: 2px 0 #00fff0;
}
@keyframes glitch-anim-1 {
  0%,80%{transform:translate(0);opacity:.8}85%{transform:translate(-3px,1px)}
  90%{transform:translate(2px,-1px)}95%{transform:translate(-1px,2px)}100%{transform:translate(0)}
}
@keyframes glitch-anim-2 {
  0%,75%{transform:translate(0);opacity:.8}80%{transform:translate(3px,-2px)}
  85%{transform:translate(-2px,1px)}90%{transform:translate(1px,-1px)}
  95%{transform:translate(-3px,2px)}100%{transform:translate(0)}
}
@keyframes glitch-skew {
  0%,96%{transform:skewX(0)}97%{transform:skewX(-2deg)}
  98%{transform:skewX(3deg)}99%{transform:skewX(-1deg)}100%{transform:skewX(0)}
}

/* ---------- Text ---------- */
.text-container { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 10px 0 30px; }
#typewriter {
  white-space: pre-wrap; font-size: 15px; line-height: 1.7;
  min-height: 80px; text-align: center; width: 100%;
  text-shadow: 0 0 4px var(--green-glow), 0 0 10px rgba(51,255,51,.1);
  filter: blur(0.3px);
}
#typewriter .highlight {
  color: var(--orange); font-weight: bold;
  text-shadow: 0 0 6px var(--orange-glow), 0 0 15px rgba(255,102,0,.25), 0 0 30px rgba(255,102,0,.1);
  filter: none;
}
.cursor::after {
  content: "\2588"; color: var(--green);
  animation: blink 0.7s step-end infinite;
  text-shadow: 0 0 8px var(--green-glow);
}
.cursor-orange::after {
  content: "\2588"; color: var(--orange);
  animation: blink 0.7s step-end infinite;
  text-shadow: 0 0 8px var(--orange-glow);
}
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

/* ---------- Rabbit ---------- */
.rabbit-end {
  text-align: center; margin: 20px auto; width: 100%;
  display: flex; justify-content: center;
  animation: fadeInRabbit 1.5s ease-out;
}
.rabbit-glitch { position: relative; display: inline-block; }
.rabbit-glitch::before, .rabbit-glitch::after {
  content: attr(data-text); position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; white-space: pre;
  font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.2;
  pointer-events: none;
}
.rabbit-glitch::before {
  color: #ff0040; z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
  text-shadow: -1px 0 #ff0040;
}
.rabbit-glitch::after {
  color: #00fff0; z-index: -2;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
  text-shadow: 1px 0 #00fff0;
}
.ascii-rabbit {
  color: var(--green); font-family: 'Courier New', monospace;
  font-size: 14px; line-height: 1.2; display: block; text-align: center; margin: 0;
  text-shadow: 0 0 5px var(--green-glow), 0 0 15px rgba(51,255,51,.15);
}
@keyframes fadeInRabbit { 0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)} }

/* ---------- Form Intro ---------- */
.form-intro {
  max-width: 520px; width: 100%; margin: 0 auto 15px;
  text-align: center; color: var(--green-dark);
  font-size: 12px; line-height: 1.6; letter-spacing: .5px;
  text-shadow: 0 0 3px rgba(0,80,0,.2);
  border-top: 1px solid rgba(10,79,10,.3);
  border-bottom: 1px solid rgba(10,79,10,.3);
  padding: 12px 10px;
}

/* ---------- Form ---------- */
form {
  margin: 10px auto; color: var(--green-dim);
  font-family: 'Courier New', monospace;
  max-width: 500px; width: 100%; text-align: left;
}
form label { text-shadow: 0 0 4px rgba(255,255,255,0.2); font-size: 13px; color: #c0c0c0; }
input, textarea {
  width: 100%; background: rgba(0,10,0,.5); border: none;
  border-bottom: 1px solid var(--green-dark); color: var(--green);
  padding: 6px 4px; font-family: inherit; font-size: 14px;
  outline: none; caret-color: var(--green); transition: border-color .3s;
  text-shadow: 0 0 3px var(--green-glow);
}
input::placeholder, textarea::placeholder { color: rgba(51,255,51,.15); font-style: italic; }
input:focus, textarea:focus { border-bottom-color: var(--green); box-shadow: 0 1px 0 0 var(--green-glow); }
textarea { resize: vertical; min-height: 60px; }
button {
  background: rgba(0,30,0,.6); color: var(--green);
  border: 1px solid var(--green-dark); padding: 10px 24px;
  font-family: inherit; font-size: 14px; margin-top: 10px;
  cursor: pointer; letter-spacing: 2px; text-transform: uppercase;
  transition: all .2s; text-shadow: 0 0 5px var(--green-glow);
}
button:hover {
  background: rgba(0,60,0,.6); border-color: var(--green);
  box-shadow: 0 0 10px var(--green-glow), inset 0 0 10px rgba(0,40,0,.3);
}
#response { margin-top: 12px; color: var(--orange); font-weight: bold; text-shadow: 0 0 6px var(--orange-glow); }

/* ---------- Footer ---------- */
footer {
  width: 100%;
  margin-top: 50px;
  padding: 0 25px 5px;
  text-align: center;
  font-size: .85em;
  color: var(--green-dark);
  text-shadow: 0 0 3px rgba(0,80,0,.3);
}
.footer-border {
  width: 60%; max-width: 300px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,79,10,0.4), transparent);
  margin: 0 auto 18px;
}
.footer-content { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.footer-pad { height: 35px; }
.fb-link { color: var(--green-dark); transition: color .2s, filter .2s; display: inline-flex; align-items: center; }
.fb-link:hover { color: var(--green); filter: drop-shadow(0 0 6px var(--green-glow)); }
.fb-icon { width: 18px; height: 18px; }

/* ---------- Mystery Icon ---------- */
.mystery-link {
  color: var(--green-dim);
  text-decoration: none;
  transition: color .3s, filter .3s;
  display: inline-flex;
  align-items: center;
}
.mystery-icon {
  width: 20px; height: 20px;
  animation: mystery-pulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 4px var(--green-glow));
}
.mystery-link:hover {
  color: var(--orange);
  filter: drop-shadow(0 0 10px var(--orange-glow));
}
@keyframes mystery-pulse {
  0%,100% { opacity: 0.5; }
  50% { opacity: 1; filter: drop-shadow(0 0 8px var(--green-glow)); }
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 768px) {
  .crt-frame { width: 100vw; height: 100vh; border-radius: 0; padding: 6px; border: none; }
  .crt-screen { border-radius: 8px; }
  .title { font-size: 2.2em; letter-spacing: 5px; }
  .title-block { margin-top: 15px; margin-bottom: 18px; }
  .title-line { width: 200px; }
  .subtitle { font-size: .82em; }
  #typewriter { font-size: 13px; line-height: 1.6; }
  input, textarea, button { font-size: 13px; }
  .ascii-rabbit { font-size: 11px; }
  .rabbit-glitch::before, .rabbit-glitch::after { font-size: 11px; }
  .crt-content { padding: 15px 15px 0; }
  .form-intro { font-size: 11px; }
  .pre-header { height: 28px; font-size: 8px; padding: 0 10px; letter-spacing: 1px; }
  .ph-center { display: none; }
}
@media screen and (max-width: 400px) {
  .title { font-size: 1.6em; letter-spacing: 3px; }
  .subtitle { font-size: .75em; letter-spacing: 1px; }
  #typewriter { font-size: 12px; }
  .pre-header { font-size: 7px; }
  .ph-ref, .ph-status { display: none; }
}