/* ── Full-page terminal ── */
.terminal-body {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  padding: 3rem 3.5rem;
  overflow-y: auto;
  text-shadow:
    0 0 8px rgba(245, 197, 24, 0.5),
    0 0 25px rgba(245, 197, 24, 0.2),
    0 0 50px rgba(245, 197, 24, 0.05);
}

.line {
  font-family: var(--mono);
  font-size: 1.1rem;
  line-height: 1.8;
  white-space: pre;
  opacity: 0;
  transition: opacity 0.15s;
  color: #c8b560;
}

.line.visible {
  opacity: 1;
}

/* ── Prompt ── */
.prompt {
  color: var(--accent);
  margin-right: 0.5em;
  user-select: none;
}

/* ── Output text ── */
.output {
  color: #8a7d4a;
}

.output .accent {
  color: var(--accent);
  font-weight: 700;
}

/* ── ASCII art ── */
.output.ascii {
  color: var(--accent);
  font-size: 0.85rem;
  line-height: 1.2;
  opacity: 0.9;
  text-shadow:
    -2px 0 rgba(255, 0, 0, 0.2),
     2px 0 rgba(0, 255, 255, 0.2),
     0 0 15px rgba(245, 197, 24, 0.6),
     0 0 40px rgba(245, 197, 24, 0.15);
}

/* ── Tick + ready ── */
.tick {
  color: var(--accent);
}

.ready {
  color: var(--accent);
  font-weight: 700;
}

/* ── ANSI Logo ── */
.ansi-logo {
  font-family: var(--mono);
  font-size: 0.11rem;
  line-height: 1.1;
  margin: 0.5rem 0;
  white-space: pre;
  overflow-x: auto;
  text-shadow:
    0 0 6px rgba(245, 197, 24, 0.3),
    0 0 20px rgba(245, 197, 24, 0.1);
  animation: logoGlow 4s ease-in-out infinite alternate;
}

@keyframes logoGlow {
  0%   { filter: brightness(0.93); }
  100% { filter: brightness(1.08); }
}

@media (min-width: 768px) {
  .ansi-logo {
    font-size: 0.14rem;
  }
}

@media (min-width: 1200px) {
  .ansi-logo {
    font-size: 0.175rem;
  }
}

/* ── Interactive input ── */
.term-input {
  font-family: var(--mono);
  font-size: inherit;
  color: #c8b560;
  background: none;
  border: none;
  outline: none;
  width: calc(100% - 2em);
  caret-color: transparent;
  text-shadow: inherit;
}

/* Block cursor overlay */
.input-line {
  position: relative;
}

.block-cursor {
  display: inline-block;
  width: 0.65em;
  height: 1.15em;
  background: var(--accent);
  animation: cursorBlink 1s step-end infinite;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* ── VHS overlay — topmost layer ── */
.vhs-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  animation: vhsJitter 2s steps(1) infinite;
  /* CRT vignette — heavy dark edges */
  box-shadow: inset 0 0 200px 80px rgba(0, 0, 0, 0.7);
}


/* Analog jitter */
@keyframes vhsJitter {
  0%   { transform: translate(0, 0) skewX(0deg); }
  10%  { transform: translate(-1.5px, 0) skewX(0.05deg); }
  20%  { transform: translate(1px, 0.8px) skewX(-0.03deg); }
  35%  { transform: translate(0.5px, -1px) skewX(0.04deg); }
  50%  { transform: translate(-1px, 0.5px) skewX(-0.05deg); }
  65%  { transform: translate(1.5px, 0) skewX(0.03deg); }
  80%  { transform: translate(-0.5px, -0.5px) skewX(-0.04deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* Text brightness drift */
.terminal-body .line {
  animation: textGlow 4s ease-in-out infinite alternate;
}

@keyframes textGlow {
  0%   { filter: brightness(0.9); }
  50%  { filter: brightness(1.12); }
  100% { filter: brightness(0.93); }
}

/* ── CRT screen curve via radial gradient on body ── */
body::after {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.4) 80%, rgba(0, 0, 0, 0.85) 100%) !important;
}

/* ── Game canvas ── */
.game-canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  border: 1px solid rgba(245, 197, 24, 0.15);
  border-radius: 4px;
}

.game-hint {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 1rem;
}

/* ── CRT turn-off effect ── */
.crt-off {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: all;
}

.crt-off::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 2px;
  width: 0;
  height: 0;
  box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: all 0.3s ease-in;
}

/* Phase 1: screen squishes to horizontal line */
.crt-off.phase1 {
  opacity: 1;
  animation: crtSquish 0.45s ease-in forwards;
}

@keyframes crtSquish {
  0% {
    clip-path: inset(0 0 0 0);
    background: rgba(0, 0, 0, 0.3);
  }
  60% {
    clip-path: inset(0 0 0 0);
    background: rgba(0, 0, 0, 0.95);
  }
  100% {
    clip-path: inset(49% 0 49% 0);
    background: #000;
  }
}

/* Phase 2: horizontal line with bright center */
.crt-off.phase2 {
  clip-path: none;
  background: #000;
}

.crt-off.phase2::after {
  opacity: 1;
  width: 60%;
  height: 2px;
  transition: all 0.35s ease-in;
}

/* Phase 3: shrink to dot and fade */
.crt-off.phase3::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.4);
  opacity: 0;
  transition: all 0.5s ease-out;
}

/* ── Game name input overlay ── */
.game-name-input {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--mono);
}

.game-name {
  width: 160px !important;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(245, 197, 24, 0.3) !important;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #c8b560;
  background: rgba(5, 5, 5, 0.8);
}

.game-name:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.2);
}

.game-name::placeholder {
  color: rgba(200, 181, 96, 0.4);
}

.game-submit,
.game-skip {
  font-family: var(--mono);
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(245, 197, 24, 0.3);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}

.game-submit {
  background: var(--accent);
  color: #050505;
  font-weight: 700;
}

.game-submit:hover {
  background: #d4a910;
}

.game-skip {
  background: transparent;
  color: #8a7d4a;
}

.game-skip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 600px) {
  .terminal-body {
    padding: 1.5rem 1.25rem;
  }

  .line {
    font-size: 0.9rem;
  }

  .output.ascii {
    font-size: 0.6rem;
  }
}