/* ==========================================================================
   MindVox BBS recreation — CRT terminal styling
   ========================================================================== */

:root{
  --bg: #060806;
  --fg: #33ff66;
  --fg-dim: #1c9440;
  --fg-bright: #a6ffbf;
  --amber: #ffb000;
  --red: #ff5555;
  --cyan: #4fd6d6;
  --magenta: #ff66cc;
  --yellow: #f4f16b;
  --font-term: 'Share Tech Mono', 'VT323', ui-monospace, monospace;
  --scan-op: 0.18;
}

/* color themes toggled via body class on #crt-wrap */
.phosphor-green{ --fg:#33ff66; --fg-dim:#1c9440; --fg-bright:#c3ffd5; }
.phosphor-amber{ --fg:#ffb000; --fg-dim:#8a5c00; --fg-bright:#ffe0a3; }
.phosphor-white{ --fg:#d8e6e0; --fg-dim:#7c8a85; --fg-bright:#ffffff; }

*{ box-sizing: border-box; }

html,body{
  margin:0; padding:0; height:100%;
  background:#000;
  font-family: var(--font-term);
  overflow: hidden;
}

#crt-wrap{
  position:relative;
  width:100vw; height:100vh;
  background: radial-gradient(ellipse at center, #0c0f0c 0%, #000 78%);
  display:flex; flex-direction:column;
  padding: 14px 14px 0 14px;
}

#power-light{
  position:absolute; top:10px; right:18px; width:8px; height:8px; border-radius:50%;
  background: var(--fg); box-shadow: 0 0 6px 2px var(--fg);
  animation: blink-slow 3.2s infinite ease-in-out;
  z-index: 30;
}
@keyframes blink-slow{ 0%,92%,100%{opacity:1;} 96%{opacity:.3;} }

#screen{
  position:relative;
  flex: 1 1 auto;
  min-height:0;
  border-radius: 18px;
  background: #030503;
  box-shadow:
    inset 0 0 120px 20px rgba(0,0,0,0.85),
    inset 0 0 40px 4px rgba(0,0,0,0.9),
    0 0 40px rgba(0,0,0,0.6);
  overflow:hidden;
  border: 1px solid #111;
}

#crt-content{
  position:absolute; inset:0;
  padding: 22px 30px;
  overflow-y:auto;
  color: var(--fg);
  text-shadow: 0 0 2px var(--fg), 0 0 6px rgba(51,255,102,0.35);
  filter: brightness(1.08);
}
.phosphor-amber #crt-content{ text-shadow: 0 0 2px var(--fg), 0 0 6px rgba(255,176,0,0.35); }
.phosphor-white #crt-content{ text-shadow: 0 0 2px var(--fg), 0 0 6px rgba(255,255,255,0.25); }

#crt-content::-webkit-scrollbar{ width:0; height:0; }
#crt-content{ scrollbar-width:none; }

#output{
  margin:0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 17px;
  line-height: 1.32;
  font-family: var(--font-term);
}

#inputline{
  display:flex;
  align-items:baseline;
  font-size:17px;
  line-height:1.32;
  white-space: pre-wrap;
  word-break: break-word;
}
#prompt-text{ color: var(--fg-bright); margin-right: 6px; font-weight:bold; }
#typed{ color: var(--fg); }
#cursor{
  display:inline-block;
  color: var(--fg-bright);
  animation: blink 1s steps(1) infinite;
  margin-left:1px;
}
@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

#hidden-input{
  position:absolute; opacity:0; pointer-events:none; width:1px; height:1px;
}

/* ---- text color helpers used by content renderer ---- */
.c-dim{ color: var(--fg-dim); }
.c-bright{ color: var(--fg-bright); }
.c-amber{ color: var(--amber); }
.c-red{ color: var(--red); }
.c-cyan{ color: var(--cyan); }
.c-magenta{ color: var(--magenta); }
.c-yellow{ color: var(--yellow); }
.c-inverse{ background: var(--fg); color:#000; }

/* ---- CRT effect layers ---- */
#scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,var(--scan-op)) 2px,
    rgba(0,0,0,var(--scan-op)) 3px
  );
  mix-blend-mode: multiply;
}
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:6;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
#glow{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0));
}
#flicker{
  position:absolute; inset:0; pointer-events:none; z-index:7;
  background: rgba(255,255,255,0.02);
  opacity:0;
  animation: flicker 6.5s infinite;
}
@keyframes flicker{
  0%,100%{opacity:0;}
  2%{opacity:.35;}
  2.3%{opacity:0;}
  47%{opacity:0;}
  47.3%{opacity:.18;}
  47.6%{opacity:0;}
  71%{opacity:0;}
  71.2%{opacity:.25;}
  71.5%{opacity:0;}
}

/* subtle screen-wide curvature illusion */
#screen::after{
  content:"";
  position:absolute; inset:0; z-index:8; pointer-events:none;
  box-shadow: inset 0 0 90px 30px #000;
  border-radius: 18px;
}

#statusbar{
  flex: 0 0 auto;
  display:flex; justify-content:space-between; align-items:center;
  color: var(--fg-dim);
  font-family: var(--font-term);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 7px 6px 10px 6px;
}

/* ---- click-to-start veil ---- */
#click-veil{
  position:absolute; inset:0; z-index:50;
  background: #000;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.veil-inner{ text-align:center; color:#33ff66; font-family: var(--font-term); }
.veil-title{
  font-size: 54px; letter-spacing: 0.25em; font-weight:bold;
  text-shadow: 0 0 8px #33ff66, 0 0 22px #1c9440;
  margin-bottom: 6px;
}
.veil-sub{ font-size:13px; color:#1c9440; letter-spacing:0.15em; margin-bottom:34px; text-transform:uppercase; }
#veil-btn{
  background:transparent; color:#c3ffd5; border:1px solid #33ff66; border-radius:4px;
  padding: 14px 26px; font-family: var(--font-term); font-size:16px; letter-spacing:0.08em;
  cursor:pointer; box-shadow: 0 0 12px rgba(51,255,102,0.25);
  animation: pulse-btn 2s infinite;
}
#veil-btn:hover{ background: rgba(51,255,102,0.1); }
@keyframes pulse-btn{ 0%,100%{ box-shadow:0 0 6px rgba(51,255,102,0.2);} 50%{ box-shadow:0 0 18px rgba(51,255,102,0.55);} }
.veil-note{ margin-top:26px; font-size:11px; color:#3a5c44; max-width:380px; line-height:1.5; }

#click-veil.hidden{ display:none; }

/* ---- responsive ---- */
@media (max-width: 720px){
  #crt-wrap{ padding: 8px 8px 0 8px; }
  .veil-title{ font-size: 34px; }

  /* Classic BBS terminals were a fixed 80-column grid -- reflowing that text
     destroys ASCII art and table alignment. Rather than word-wrap (which
     mangles art), shrink the font and let the terminal scroll horizontally,
     the way a real narrow terminal window would have. */
  #crt-content{ padding: 16px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #output, #inputline{
    font-size: 11px;
    white-space: pre;
    word-break: normal;
    width: max-content;
    min-width: 100%;
  }
  #statusbar{ font-size: 10px; flex-wrap: wrap; row-gap: 2px; }
}

@media (max-width: 400px){
  #output, #inputline{ font-size: 9.5px; }
}