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

body{
  font-family:'Press Start 2P',cursive;
  background:black;
  color:white;
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100vh;
}

/* CRT FX */
.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1000;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0px,
    rgba(0,0,0,.25) 1px,
    transparent 1px,
    transparent 4px
  );
}

.crt-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  background:radial-gradient(circle at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,.6) 100%);
}

/* CRT collapse animation */
.crt-collapse{
  animation:crtCollapse .6s forwards;
  transform-origin:center;
}

@keyframes crtCollapse{
  0%{transform:scaleY(1);opacity:1;}
  60%{transform:scaleY(.05);opacity:.9;}
  100%{transform:scaleY(0);opacity:0;}
}

/* ===== CRT FLASH LINE ===== */
#crtFlash{
  position:fixed;
  left:0;
  width:100%;
  height:4px;
  background:white;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  z-index:10000;
  pointer-events:none;
}

.flash-active{
  animation:flashLine .15s ease-out forwards;
}

@keyframes flashLine{
  0%{opacity:1;height:6px;}
  100%{opacity:0;height:2px;}
}

/* Layout */
.container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:40px 20px;
}

h1{
  color:#ff00ff;
  text-shadow:0 0 25px #ff00ff;
  margin-bottom:60px;
  font-size:1.5rem;
}

.mode-wrapper{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:1000px;
  margin:0 auto;
}

.mode-card{
  width:min(360px, 100%);
  background:rgba(0,0,0,.85);
  border:3px solid #00ffff;
  box-shadow:0 0 30px #00ffff;
  cursor:pointer;
  transition:.3s;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}

.mode-card:hover,
.mode-card.gamepad-selected{
  transform:perspective(1000px) rotateX(6deg) scale(1.05);
  box-shadow:0 0 40px #ff00ff,0 0 30px #00ffff inset;
}

.preview-video{
  width:100%;
  height:200px;
  object-fit:cover;
  border-bottom:3px solid #00ffff;
}

.mode-title{
  padding:20px;
  font-size:.8rem;
  color:#00ffff;
  text-shadow:0 0 15px #00ffff;
}

.mode-desc{
  padding:0 20px 20px;
  font-size:.6rem;
  opacity:.8;
}

/* CRT Power On */
.crt-boot {
  animation: crtBoot 0.6s forwards;
}

@keyframes crtBoot {
  0% {
    transform: scaleY(0);
    filter: brightness(3);
  }
  40% {
    transform: scaleY(0.05);
    filter: brightness(2);
  }
  100% {
    transform: scaleY(1);
    filter: brightness(1);
  }
}

@media (max-width: 900px){
  .container{
    padding:30px 16px 40px;
    justify-content:flex-start;
  }

  h1{
    margin-bottom:40px;
    font-size:1.1rem;
    line-height:1.5;
  }

  .mode-wrapper{
    gap:24px;
  }

  .mode-card{
    width:min(500px, 100%);
  }

  .preview-video{
    height:180px;
  }

  .mode-title{
    font-size:.75rem;
    padding:18px;
  }

  .mode-desc{
    font-size:.58rem;
    line-height:1.6;
    padding:0 18px 18px;
  }
}

@media (max-width: 600px){
  .container{
    padding:24px 12px 32px;
  }

  h1{
    font-size:.9rem;
    margin-bottom:28px;
  }

  .mode-wrapper{
    gap:18px;
  }

  .mode-card{
    width:min(100%, 500px);
    margin:0 auto;
  }

  .preview-video{
    height:160px;
  }

  .mode-title{
    font-size:.68rem;
    padding:16px;
  }

  .mode-desc{
    font-size:.52rem;
    line-height:1.5;
    padding:0 16px 16px;
  }
}