@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'VT323';
  src: url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
}

@layer utilities {
  .typing-effect {
    border-right: 2px solid #00FF00;
    animation: cursor-blink 1s step-end infinite;
  }

  .tv-frame {
    @apply rounded-[50px] p-8;
    background: linear-gradient(145deg, #4a4a4a, #2a2a2a);
    box-shadow:
      20px 20px 60px #1a1a1a,
      -20px -20px 60px #3a3a3a,
      inset 0 2px 20px rgba(255, 255, 255, 0.1);
    border: 12px solid #1a1a1a;
    border-radius: 50px;
    transform: perspective(1200px) rotateX(2deg);
    overflow: hidden;
  }

  /* Wood texture overlay */
  .tv-frame::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    background: 
      linear-gradient(145deg, #3a3a3a, #1a1a1a),
      url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23232323' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    border-radius: 60px;
    z-index: -1;
    mix-blend-mode: overlay;
    opacity: 0.8;
  }

  /* TV frame highlights */
  .tv-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: 
      linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.05) 40%,
        transparent 100%
      );
    border-radius: 40px 40px 0 0;
    pointer-events: none;
  }

  /* Small scratches and noise texture */
  .tv-frame-texture {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
  }

  /* TV body edge shadow */
  .tv-frame-edge {
    position: absolute;
    inset: -1px;
    border-radius: 51px;
    background: linear-gradient(145deg, #1a1a1a, #000000);
    z-index: -2;
    box-shadow: 
      0 10px 30px rgba(0, 0, 0, 0.8),
      0 30px 60px rgba(0, 0, 0, 0.6);
  }

  /* TV frame knobs */
  .tv-knob {
    @apply absolute w-10 h-10 rounded-full;
    background: linear-gradient(135deg, #4a4a4a, #1a1a1a);
    box-shadow: 
      inset 2px 2px 5px rgba(255, 255, 255, 0.15),
      inset -2px -2px 5px rgba(0, 0, 0, 0.7),
      0 3px 6px rgba(0, 0, 0, 0.6),
      0 1px 2px rgba(0, 0, 0, 0.9);
    border: 1px solid #0a0a0a;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(2px);
  }

  .tv-knob::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: repeating-conic-gradient(
      from 0deg,
      #2a2a2a 0deg 30deg,
      #3a3a3a 30deg 60deg
    );
    box-shadow:
      inset 0 0 5px rgba(0, 0, 0, 0.5);
  }

  .tv-knob::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 3px;
    background: #111;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  /* Enhanced Screen Container with Glass Effect */
  .tv-screen-container {
    background: #000;
    box-shadow:
      inset 0 0 50px rgba(0, 0, 0, 0.6),
      inset 0 0 100px rgba(0, 0, 0, 0.4);
    transform: perspective(1000px) rotateX(1deg);
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(0, 80, 0, 0.2);
  }

  /* Enhanced Convex Screen Effect */
  .tv-screen-convex {
    content: '';
    background: radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0.4) 100%
    );
    border-radius: 50% / 10%;
    pointer-events: none;
    z-index: 40;
    position: relative;
  }

  .tv-screen-convex::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle at 30% 20%,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 25%,
      transparent 50%
    );
    border-radius: inherit;
  }

  /* Glass Reflections */
  .glass-reflection {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      125deg,
      transparent 0%,
      transparent 40%,
      rgba(255, 255, 255, 0.07) 42%,
      rgba(255, 255, 255, 0.01) 50%,
      transparent 52%,
      transparent 100%
    );
    z-index: 41;
    pointer-events: none;
    opacity: 0.6;
  }

  .glass-reflection-2 {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      -30deg,
      transparent 0%,
      transparent 65%,
      rgba(255, 255, 255, 0.05) 67.5%,
      rgba(255, 255, 255, 0.02) 70%,
      transparent 72.5%,
      transparent 100%
    );
    z-index: 42;
    pointer-events: none;
    opacity: 0.4;
  }

  /* Corner light shine effect */
  .corner-shine {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 30%;
    height: 30%;
    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%
    );
    border-radius: 50%;
    z-index: 42;
    pointer-events: none;
    opacity: 0.7;
  }

  /* Chromatic aberration effect */
  .chromatic-aberration {
    position: absolute;
    inset: 0;
    z-index: 43;
    pointer-events: none;
    box-shadow:
      inset 1px 0 0 rgba(255, 0, 0, 0.05),
      inset -1px 0 0 rgba(0, 255, 255, 0.05);
    mix-blend-mode: screen;
  }

  /* Scan Lines Effect - Enhanced */
  .scan-lines {
    position: absolute;
    inset: 0; 
    z-index: 44;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 1px,
      rgba(0, 0, 0, 0.1) 1px,
      rgba(0, 0, 0, 0.1) 2px
    );
    mix-blend-mode: overlay;
  }

  /* White Noise Overlay */
  .white-noise {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    z-index: 39;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5.5' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' fill='%23ffffff'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
  }

  /* Improved Screen Glare */
  .screen-glare {
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.02) 60%,
      transparent 100%
    );
    animation: horizontal-glare 8s linear infinite;
    opacity: 0.3;
    z-index: 45;
  }

  /* Skeuomorphic Terminal Button */
  .terminal-button {
    @apply relative w-full py-3 px-6 font-mono text-lg
           transition-all duration-150 select-none;
    font-family: 'VT323', 'Courier New', monospace;
    color: #4AFF4A;
    text-shadow: 0 0 8px rgba(74, 255, 74, 0.5);
    background: linear-gradient(to bottom, 
      #003300 0%, 
      #002200 40%, 
      #001800 100%);
    border-radius: 6px;
    border-top: 1px solid #005500;
    border-left: 1px solid #004400;
    border-right: 1px solid #001100;
    border-bottom: 1px solid #001100;
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 8px rgba(0, 255, 0, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.05),
      0 -1px 0 rgba(0, 0, 0, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
  }

  .terminal-button-selected {
    @apply text-[110%] font-bold;
    color: #7FFF7F;
    text-shadow: 0 0 12px rgba(74, 255, 74, 0.8);
    background: linear-gradient(to bottom, 
      #004000 0%, 
      #003300 40%, 
      #002200 100%);
    box-shadow: 
      inset 0 1px 10px rgba(0, 0, 0, 0.6),
      inset 0 0 8px rgba(0, 255, 0, 0.25),
      0 1px 0 rgba(0, 255, 0, 0.05),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .terminal-button::before {
    content: '';
    @apply absolute top-0 left-0 right-0 h-[1px] opacity-40;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(0, 255, 0, 0.8) 50%,
      transparent 100%
    );
  }

  .terminal-button:hover {
    color: #7FFF7F;
    text-shadow: 0 0 8px rgba(74, 255, 74, 0.8);
    background: linear-gradient(to bottom, 
      #003800 0%, 
      #002800 40%, 
      #001E00 100%);
  }

  .terminal-button:active {
    @apply transform scale-[0.98];
    background: linear-gradient(to bottom, 
      #001E00 0%, 
      #002800 60%, 
      #003000 100%);
    box-shadow: 
      inset 0 1px 10px rgba(0, 0, 0, 0.5),
      inset 0 0 8px rgba(0, 80, 0, 0.2);
  }

  /* Skeuomorphic screen effect */
  .screen-content {
    background-color: rgba(0, 17, 0, 0.95);
    background-image: 
      linear-gradient(0deg, 
        rgba(0, 20, 0, 1) 0%, 
        rgba(0, 27, 0, 1) 100%),
      radial-gradient(
        circle at center, 
        rgba(0, 40, 0, 1) 0%, 
        rgba(0, 20, 0, 1) 100%
      );
    background-blend-mode: screen;
    box-shadow: 
      inset 0 0 30px rgba(0, 0, 0, 0.8),
      inset 0 0 80px rgba(0, 0, 0, 0.5);
  }

  /* Vertical separator with emboss effect */
  .vertical-separator {
    width: 2px;
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.3),
      rgba(0, 255, 0, 0.15),
      rgba(0, 0, 0, 0.3)
    );
    position: relative;
    border-radius: 1px;
  }

  /* Terminal text input with skeuomorphic effect */
  .terminal-input {
    background: rgba(0, 10, 0, 0.7);
    border: 1px solid rgba(0, 50, 0, 0.3);
    border-bottom: 1px solid rgba(0, 100, 0, 0.2);
    border-right: 1px solid rgba(0, 70, 0, 0.2);
    box-shadow: 
      inset 0 1px 5px rgba(0, 0, 0, 0.5),
      inset 0 0 10px rgba(0, 0, 0, 0.3),
      0 0 0 1px rgba(0, 30, 0, 0.1);
    color: #4AFF4A;
    text-shadow: 0 0 5px rgba(74, 255, 74, 0.5);
    caret-color: #4AFF4A;
    border-radius: 4px;
  }

  /* Rest of existing styles remain unchanged */
  .glare-effect {
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(74, 255, 74, 0.1) 25%,
      rgba(74, 255, 74, 0.1) 75%,
      transparent 100%
    );
    animation: glare 3s ease-in-out infinite;
    opacity: 0.2;
  }

  /* Cyberpunk theme styles */
  .cyberpunk-theme .terminal-button {
    border-color: rgba(147, 51, 234, 0.3);
    background: linear-gradient(to bottom, 
      #25002A 0%, 
      #1A001F 40%, 
      #120016 100%);
    color: #df6cfc;
    text-shadow: 0 0 8px rgba(147, 51, 234, 0.5);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 8px rgba(147, 51, 234, 0.1),
      0 1px 0 rgba(255, 255, 255, 0.05),
      0 -1px 0 rgba(0, 0, 0, 0.5),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .cyberpunk-theme .terminal-button-selected {
    color: #FF00FF;
    text-shadow: 0 0 12px rgba(147, 51, 234, 0.8);
    background: linear-gradient(to bottom, 
      #3A0040 0%, 
      #2A0030 40%, 
      #1F0024 100%);
    box-shadow: 
      inset 0 1px 10px rgba(0, 0, 0, 0.6),
      inset 0 0 8px rgba(147, 51, 234, 0.25),
      0 1px 0 rgba(147, 51, 234, 0.05),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .cyberpunk-theme .terminal-button::before {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(147, 51, 234, 0.8) 50%,
      transparent 100%
    );
  }

  .cyberpunk-theme .typing-effect {
    border-right-color: #df6cfc;
  }

  .cyberpunk-theme input {
    color: #df6cfc;
  }

  .cyberpunk-theme .screen-content {
    background-color: rgba(17, 0, 17, 0.95);
    background-image: 
      linear-gradient(0deg, 
        rgba(20, 0, 20, 1) 0%, 
        rgba(27, 0, 27, 1) 100%),
      radial-gradient(
        circle at center, 
        rgba(40, 0, 40, 1) 0%, 
        rgba(20, 0, 20, 1) 100%
      );
  }
}

@keyframes cursor-blink {
  from, to { border-color: transparent }
  50% { border-color: #00FF00 }
}

@keyframes glare {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes horizontal-glare {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(200%);
  }
}

/* Custom scrollbar with skeuomorphic design */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(to right, #001100, #002200, #001100);
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #003300, #00AA00, #003300);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #004400, #00CC00, #004400);
}

/* Custom Scrollbar - Enhanced */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: linear-gradient(to right, rgba(0, 20, 0, 0.3), rgba(0, 51, 0, 0.3), rgba(0, 20, 0, 0.3));
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #003300, #00AA00, #003300);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to right, #004400, #00CC00, #004400);
}