/* styles.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: #000;
  height: 100vh;
  font-family: Courier New, monospace;
}

#app {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items:  center;
  width: 100%;
  height: 100%;
}

#psychedelic-bg {
  position: fixed;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.terminal {
  background: #000a00f2;
  border: 2px solid #0ff;
  border-radius: 8px;
  width: min(96vw, 1250px);
  height: min(85vh, 900px);
  padding: clamp(20px, 2.2vw, 34px);
  box-shadow: 0 0 30px #00ffff80, 0 0 60px #ff00ff4d, inset 0 0 60px #00ffff1a;
}

.terminal-header {
  color: #0ff;
  text-shadow: 0 0 10px #0ff;
  margin-bottom: 20px;
  font-size: clamp(15px, 1.2vw, 20px);
}

.terminal-content {
  color: #0ff;
  text-shadow: 0 0 10px #0ff;
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.6;
}

.input-line {
  display: flex;
  align-items:  center;
}

.prompt {
  color: #f0f;
  text-shadow: 0 0 10px #f0f;
}

.typed-text {
  color: #0ff;
}

.cursor {
  color: #0ff;
  animation: blink .5s step-end infinite;
  text-shadow: 0 0 15px #0ff;
}

.cursor--robot {
  animation: blink .8s step-end infinite;
}

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

.output-line {
  color: #ccc;
  white-space: pre;
  margin: 2px 0;
  font-family: Courier New, monospace;
  font-size: clamp(17px, 1.5vw, 24px);
}

.error-line {
  color: #f66;
}

.terminal--final {
  background: #1a1a1a;
  border-color: #444;
  box-shadow: 0 4px 20px #00000080;
}

.terminal--final .terminal-content {
  color: #ccc;
  text-shadow: none;
}

.terminal--final .prompt {
  color: #6c6;
  text-shadow: none;
}

.terminal--final .typed-text {
  color: #ccc;
}

.terminal--final .cursor {
  color: #6c6;
  text-shadow: none;
}

.thinking-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
}

.robot-spinner {
  animation: spin-wobble .3s ease-in-out infinite;
  filter: drop-shadow(0 0 50px #f0f) drop-shadow(0 0 100px #0ff);
  font-size: 150px;
}

@keyframes spin-wobble {
  0% {
    transform: rotate(0)scale(1);
  }

  50% {
    transform: rotate(180deg)scale(1.2);
  }

  100% {
    transform: rotate(360deg)scale(1);
  }
}

.thinking-text {
  color: #0ff;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-shadow: 0 0 20px #0ff, 0 0 40px #0ff, 0 0 60px #f0f;
  animation: pulse-text .2s ease-in-out infinite alternate;
  margin-top: 30px;
  font-size: 32px;
  font-weight: bold;
}

@keyframes pulse-text {
  0% {
    transform: scale(1);
    opacity: .8;
  }

  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.code-overlay {
  position: relative;
  z-index: 20;
  display: flex;
  backdrop-filter: blur(2px);
  background: #000000b3;
  border: 3px solid;
  border-image:  1;
  border-radius: 8px;
  flex-direction: column;
  width: 70%;
  max-width: 800px;
  height: 70%;
  box-shadow: 0 0 40px #0ff6, 0 0 80px #ff00ff4d;
}

.code-header {
  display: flex;
  color: #0ff;
  text-shadow: 0 0 10px #0ff;
  background: #0009;
  border-bottom: 2px solid #0ff6;
  justify-content: space-between;
  padding: 12px 20px;
  font-size: 14px;
}

.code-file {
  color: #f0f;
  text-shadow: 0 0 10px #f0f;
}

.code-body {
  display: flex;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.code-numbers {
  overflow-y: auto;
  color: #f0f9;
  text-align: right;
  text-shadow: 0 0 5px #f0f;
  background: #0000004d;
  border-right: 1px solid #0ff3;
  min-width: 50px;
  margin: 0;
  padding: 15px 10px;
  font-size: 14px;
  line-height: 1.6;
}

.code-content {
  overflow-y: auto;
  overflow-x: auto;
  color: #0ff;
  text-shadow: 0 0 10px #0ff, 0 0 20px #00ffff80;
  white-space: pre;
  flex: 1;
  margin: 0;
  padding: 15px;
  font-size: 14px;
  line-height: 1.6;
}

.code-body::-webkit-scrollbar {
  width: 8px;
}

.code-content::-webkit-scrollbar {
  width: 8px;
}

.code-numbers::-webkit-scrollbar {
  width: 8px;
}

.code-body::-webkit-scrollbar-thumb {
  background: #00ffff4d;
  border-radius: 4px;
}

.code-content::-webkit-scrollbar-thumb {
  background: #00ffff4d;
  border-radius: 4px;
}

.code-numbers::-webkit-scrollbar-thumb {
  background: #00ffff4d;
  border-radius: 4px;
}

.power-msg {
  position: fixed;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 15px;
  z-index: 1000;
  animation: power-appear .3s ease-out;
  text-shadow: 0 0 30px #fff, 0 0 60px #0ff, 0 0 90px #0ff, 0 0 120px #f0f, 0 0 150px #f0f;
  pointer-events: none;
  transition: opacity .5s;
  font-size: 80px;
  font-weight: bold;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes power-appear {
  0% {
    transform: translate(-50%, -50%)scale(.3);
    opacity: 0;
  }

  50% {
    transform: translate(-50%, -50%)scale(1.3);
  }

  100% {
    transform: translate(-50%, -50%)scale(1);
    opacity: 1;
  }
}

.game-container {
  position: fixed;
  display: flex;
  z-index: 200;
  animation: fade-in 1s ease-out;
  background: #000;
  justify-content: center;
  align-items:  center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.game-btn {
  color: #0f0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 8px;
  animation: btn-glow 1s ease-in-out infinite alternate;
  text-shadow: 0 0 30px #0f0, 0 0 60px #0f0;
  background: none;
  border: 5px solid #0f0;
  padding: 50px 100px;
  transition: all .2s;
  font-family: Courier New, monospace;
  font-size: 40px;
  font-weight: bold;
  box-shadow: 0 0 40px #00ff0080, 0 0 80px #00ff004d, inset 0 0 40px #00ff001a;
}

.game-btn:hover {
  background: #0f03;
  transform: scale(1.05);
}

@keyframes btn-glow {
  0% {
    box-shadow: 0 0 40px #00ff0080, 0 0 80px #00ff004d;
  }

  100% {
    box-shadow: 0 0 80px #0f0c, 0 0 150px #00ff0080;
  }
}

.game-container.flash {
  animation: flash-out .5s ease-out forwards;
}

@keyframes flash-out {
  0% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(5);
  }

  100% {
    filter: brightness(1);
    opacity: 0;
  }
}

.shake {
  animation: shake .1s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translate(0);
  }

  25% {
    transform: translate(-5px, 5px);
  }

  75% {
    transform: translate(5px, -5px);
  }
}

.shake-intense {
  animation: shake-intense .15s ease-in-out;
}

@keyframes shake-intense {
  0%, 100% {
    transform: translate(0)rotate(0);
  }

  25% {
    transform: translate(-15px, 15px)rotate(-2deg);
  }

  75% {
    transform: translate(15px, -15px)rotate(2deg);
  }
}

.scanlines {
  position: fixed;
  pointer-events: none;
  z-index: 500;
  background: repeating-linear-gradient(0deg, #0000001a 0 1px, #0000 1px 2px);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.vignette {
  position: fixed;
  pointer-events: none;
  z-index: 501;
  background: radial-gradient(#0000 0% 60%, #00000080 100%);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.grain {
  position: fixed;
  pointer-events: none;
  z-index: 502;
  opacity: .03;
  animation: grain .3s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
}

@keyframes grain {
  0%, 100% {
    transform: translate(0);
  }

  50% {
    transform: translate(-3%, 3%);
  }
}

.flicker {
  position: fixed;
  pointer-events: none;
  z-index: 503;
  opacity: 0;
  animation: flicker .1s infinite;
  background: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

@keyframes flicker {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: .02;
  }
}

.rgb-shift {
  animation: rgb-shift .1s infinite;
}

@keyframes rgb-shift {
  0%, 100% {
    text-shadow: -3px 0 red, 3px 0 #0ff;
  }

  50% {
    text-shadow: 3px 0 red, -3px 0 #0ff;
  }
}