/* CRT Mode Styles */
:root {
  --crt-shadow-primary: #00ffff;
  --crt-shadow-secondary: #ff0066;
  --crt-scanline-bg: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.08) 50%,
    rgba(0, 0, 0, 0.08) 51%,
    rgba(255, 255, 255, 0) 51%
  );
  --crt-scanline-filter: blur(0.3px);
}

@media (prefers-color-scheme: light) {
  :root {
    --crt-shadow-primary: #0099ff;
    --crt-shadow-secondary: #ff4400;
    --crt-scanline-bg: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0) 50%,
      rgba(0, 0, 0, 0.05) 50%,
      rgba(0, 0, 0, 0.05)
    );
  }
}

.crt-mode {
  position: relative;
  overflow-x: hidden;
}

.crt-mode::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(18, 16, 16, 0.06),
      rgba(18, 16, 16, 0.06) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at center,
      transparent 0%,
      transparent 60%,
      rgba(0, 0, 0, 0.15) 100%
    );
  background-size: 100% 4px, 100% 100%;
  background-position: 0 0;
  z-index: 9999;
  pointer-events: none;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.3);
  animation: scanline-refresh 8s linear infinite;
}

.crt-mode::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.02);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt-mode main {
  filter: url(#crt-warp);
}

.crt-scanline-static {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.12),
    rgba(0, 0, 0, 0.12) 1px,
    transparent 1px,
    transparent 3px
  );
  background-size: 100% 4px;
  background-position: 0 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.5;
  animation: scanline-refresh 8s linear infinite;
}

.crt-scanline-moving {
  position: fixed;
  top: -150px;
  left: 0;
  width: 100%;
  height: 150px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  pointer-events: none;
  z-index: 9999;
  animation: scanline-move 8s linear infinite;
}

@media (prefers-color-scheme: dark) {
  .crt-scanline-moving {
    background: linear-gradient(
      to bottom,
      transparent,
      rgba(255, 255, 255, 0.02),
      transparent
    );
  }
}

@keyframes scanline-refresh {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 4px;
  }
}

@keyframes scanline-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(100vh + 300px));
  }
}

.crt-charging {
  transition: filter 3s ease-in-out;
}

.crt-charging:hover {
  filter: url(#crt-warp);
}

@keyframes flicker {
  0% {
    opacity: 0.017;
  }
  5% {
    opacity: 0.03;
  }
  10% {
    opacity: 0.01;
  }
  15% {
    opacity: 0.04;
  }
  20% {
    opacity: 0.02;
  }
  25% {
    opacity: 0.015;
  }
  30% {
    opacity: 0.03;
  }
  35% {
    opacity: 0.01;
  }
  40% {
    opacity: 0.02;
  }
  45% {
    opacity: 0.025;
  }
  50% {
    opacity: 0.015;
  }
  55% {
    opacity: 0.03;
  }
  60% {
    opacity: 0.02;
  }
  65% {
    opacity: 0.01;
  }
  70% {
    opacity: 0.03;
  }
  75% {
    opacity: 0.02;
  }
  80% {
    opacity: 0.01;
  }
  85% {
    opacity: 0.03;
  }
  90% {
    opacity: 0.02;
  }
  95% {
    opacity: 0.01;
  }
  100% {
    opacity: 0.017;
  }
}

@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.4021852950043214px 0 1px rgba(0,30,255,0.5), -0.4021852950043214px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6087774728168799px 0 1px rgba(0,30,255,0.5), -1.6087774728168799px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.28036986851081583px 0 1px rgba(0,30,255,0.5), -0.28036986851081583px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 2.0773680266773636px 0 1px rgba(0,30,255,0.5), -2.0773680266773636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 2.5914898954069986px 0 1px rgba(0,30,255,0.5), -2.5914898954069986px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 0.4887402515542125px 0 1px rgba(0,30,255,0.5), -0.4887402515542125px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 1.894849130575795px 0 1px rgba(0,30,255,0.5), -1.894849130575795px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.749045273767915px 0 1px rgba(0,30,255,0.5), -2.749045273767915px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 0.03928823847247618px 0 1px rgba(0,30,255,0.5), -0.03928823847247618px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 3.379508342336618px 0 1px rgba(0,30,255,0.5), -3.379508342336618px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 1.2339614646353114px 0 1px rgba(0,30,255,0.5), -1.2339614646353114px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 2.90202894489507px 0 1px rgba(0,30,255,0.5), -2.90202894489507px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.8525332976270758px 0 1px rgba(0,30,255,0.5), -0.8525332976270758px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 1.903599808936885px 0 1px rgba(0,30,255,0.5), -1.903599808936885px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.3429821201822986px 0 1px rgba(0,30,255,0.5), -3.3429821201822986px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 1.9709068623141586px 0 1px rgba(0,30,255,0.5), -1.9709068623141586px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}

@keyframes charging-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-1px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(1px);
  }
}

.crt-toggle-btn {
  opacity: 0.5;
  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.crt-toggle-btn:hover {
  opacity: 1;
}

.crt-mode .crt-toggle-btn {
  opacity: 1;
  filter: url(#crt-warp);
  background-color: rgb(148 163 184);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.4);
}

@media (prefers-color-scheme: dark) {
  .crt-mode .crt-toggle-btn {
    background-color: rgb(71 85 105);
    box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.4);
    color: rgb(226 232 240);
  }
}

.crt-mode.crt-green::before {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 50, 0, 0.3),
      rgba(0, 50, 0, 0.3) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at center,
      transparent 0%,
      transparent 60%,
      rgba(0, 50, 0, 0.4) 100%
    );
  background-size: 100% 4px, 100% 100%;
  background-position: 0 0;
  z-index: 9999;
  pointer-events: none;
  box-shadow: inset 0 0 100px rgba(0, 50, 0, 0.5);
  animation: scanline-refresh 8s linear infinite;
}

.crt-mode.crt-green::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 80, 0, 0.15);
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: overlay;
}

@media (prefers-color-scheme: light) {
  .crt-mode.crt-green::after {
    background: rgba(0, 80, 0, 0.05);
    mix-blend-mode: multiply;
  }
}

.crt-mode.crt-green .crt-scanline-static {
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 50, 0, 0.4),
    rgba(0, 50, 0, 0.4) 1px,
    transparent 1px,
    transparent 3px
  );
}

@media (prefers-color-scheme: light) {
  .crt-mode.crt-green .crt-scanline-static {
    background: repeating-linear-gradient(
      0deg,
      rgba(0, 50, 0, 0.08),
      rgba(0, 50, 0, 0.08) 1px,
      transparent 1px,
      transparent 4px
    );
  }
}

.crt-mode.crt-green .crt-scanline-moving {
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0, 255, 0, 0.1),
    transparent
  );
}

.crt-mode.crt-green main {
  filter: url(#crt-warp) sepia(100%) hue-rotate(90deg) saturate(150%);
}

.crt-green-toggle-btn {
  opacity: 0.5;
  transition: opacity 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.crt-green-toggle-btn:hover {
  opacity: 1;
}

.crt-mode.crt-green .crt-green-toggle-btn {
  opacity: 1;
  filter: url(#crt-warp);
  background-color: rgb(34 197 94);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4);
}

@media (prefers-color-scheme: dark) {
  .crt-mode.crt-green .crt-green-toggle-btn {
    background-color: rgb(22 163 74);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4);
    color: rgb(220 252 231);
  }
}