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

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'VT323', monospace;
  background-color: #000;
  color: #0ff;
  overflow: hidden;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Landing screen */
.splash-screen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  /* Subtle radial gradient for depth without being busy */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 20, 40, 1) 0%,
    rgba(0, 10, 20, 1) 40%,
    rgba(0, 0, 0, 1) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  cursor: pointer;
  padding: 0;
  /* Slow subtle background animation for atmosphere */
  animation: bg-breathe 8s ease-in-out infinite alternate;
}

@keyframes bg-breathe {
  0% {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 20, 40, 1) 0%,
      rgba(0, 10, 20, 1) 40%,
      rgba(0, 0, 0, 1) 100%
    );
  }
  100% {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 30, 50, 1) 0%,
      rgba(0, 15, 25, 1) 40%,
      rgba(0, 0, 0, 1) 100%
    );
  }
}

.landing-content {
  text-align: center;
  padding: 2rem;
  max-width: none;
  position: relative;
  z-index: 2;
}

.logo-container {
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

/* Dramatic lighting effect behind logo */
.logo-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.3) 0%,
    rgba(0, 255, 255, 0.15) 30%,
    rgba(0, 255, 255, 0.05) 60%,
    transparent 100%
  );
  z-index: 0;
  animation: light-pulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes light-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

.logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #0ff;
  /* Dramatic layered glow effect */
  box-shadow:
    0 0 20px rgba(0, 255, 255, 0.8),
    0 0 40px rgba(0, 255, 255, 0.6),
    0 0 60px rgba(0, 255, 255, 0.4),
    0 0 80px rgba(0, 255, 255, 0.2),
    0 8px 32px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(0, 255, 255, 0.2);
  object-fit: cover;
  /* 3D depth effect */
  transform: translateZ(0);
  filter: brightness(1.1) contrast(1.1);
  /* Subtle float animation */
  animation: logo-float 4s ease-in-out infinite;
}

@keyframes logo-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow:
      0 0 20px rgba(0, 255, 255, 0.8),
      0 0 40px rgba(0, 255, 255, 0.6),
      0 0 60px rgba(0, 255, 255, 0.4),
      0 0 80px rgba(0, 255, 255, 0.2),
      0 8px 32px rgba(0, 0, 0, 0.6),
      inset 0 0 20px rgba(0, 255, 255, 0.2);
  }
  50% {
    transform: translateY(-10px) scale(1.02);
    box-shadow:
      0 0 25px rgba(0, 255, 255, 0.9),
      0 0 50px rgba(0, 255, 255, 0.7),
      0 0 75px rgba(0, 255, 255, 0.5),
      0 0 100px rgba(0, 255, 255, 0.3),
      0 15px 40px rgba(0, 0, 0, 0.7),
      inset 0 0 25px rgba(0, 255, 255, 0.3);
  }
}

.landing-title {
  font-family: 'VT323', monospace;
  font-size: 2.5rem;
  color: #0ff;
  /* Powerful layered text shadow for depth and impact */
  text-shadow:
    0 0 10px rgba(0, 255, 255, 1),
    0 0 20px rgba(0, 255, 255, 0.8),
    0 0 30px rgba(0, 255, 255, 0.6),
    0 0 40px rgba(0, 255, 255, 0.4),
    0 0 60px rgba(0, 255, 255, 0.2),
    0 2px 0 rgba(0, 0, 0, 0.8),
    0 4px 8px rgba(0, 0, 0, 0.6);
  margin-bottom: 1.5rem;
  letter-spacing: 3px;
  line-height: 1.15;
  text-transform: uppercase;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-inline: auto;
  width: fit-content;
  max-width: 90vw;
  text-align: center;
  /* Subtle pulse to draw attention */
  animation: text-pulse 3s ease-in-out infinite;
}

@keyframes text-pulse {
  0%,
  100% {
    text-shadow:
      0 0 10px rgba(0, 255, 255, 1),
      0 0 20px rgba(0, 255, 255, 0.8),
      0 0 30px rgba(0, 255, 255, 0.6),
      0 0 40px rgba(0, 255, 255, 0.4),
      0 0 60px rgba(0, 255, 255, 0.2),
      0 2px 0 rgba(0, 0, 0, 0.8),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
  50% {
    text-shadow:
      0 0 15px rgba(0, 255, 255, 1),
      0 0 30px rgba(0, 255, 255, 0.9),
      0 0 45px rgba(0, 255, 255, 0.7),
      0 0 60px rgba(0, 255, 255, 0.5),
      0 0 80px rgba(0, 255, 255, 0.3),
      0 2px 0 rgba(0, 0, 0, 0.8),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }
}

.landing-title .title-line {
  display: block;
}

.tagline {
  font-size: 1.1rem;
  color: #f0f;
  text-shadow: 0 0 6px rgb(255 0 255 / 70%);
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

.divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #0ff, transparent);
  margin: 2rem auto;
  width: 80%;
}

.prompt-container {
  margin-top: 2rem;
}

.prompt {
  font-size: 1.5rem;
  color: #fff;
  /* Powerful glow on the call to action */
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 20px rgba(0, 255, 255, 0.8),
    0 0 30px rgba(0, 255, 255, 0.6),
    0 0 40px rgba(0, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.8);
  animation: blink-glow 1.5s ease-in-out infinite;
  margin-bottom: 1rem;
  letter-spacing: 2px;
  font-weight: bold;
}

@keyframes blink-glow {
  0%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(255, 255, 255, 1),
      0 0 20px rgba(0, 255, 255, 0.8),
      0 0 30px rgba(0, 255, 255, 0.6),
      0 0 40px rgba(0, 255, 255, 0.4),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
  50% {
    opacity: 0.7;
    text-shadow:
      0 0 15px rgba(255, 255, 255, 1),
      0 0 30px rgba(0, 255, 255, 1),
      0 0 45px rgba(0, 255, 255, 0.8),
      0 0 60px rgba(0, 255, 255, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.8);
  }
}

.system-info {
  font-size: 0.9rem;
  color: #666;
  margin-top: 2rem;
  letter-spacing: 1px;
}

/* Glitch effect */
.glitch {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  white-space: pre-line;
  text-align: inherit;
}

.glitch::before {
  left: 2px;
  text-shadow: -1px 0 #f0f;
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: 2px 0 #0ff;
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(30% 0 40% 0);
  }

  20% {
    clip-path: inset(80% 0 1% 0);
  }

  40% {
    clip-path: inset(43% 0 27% 0);
  }

  60% {
    clip-path: inset(25% 0 58% 0);
  }

  80% {
    clip-path: inset(13% 0 75% 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(15% 0 49% 0);
  }

  20% {
    clip-path: inset(40% 0 13% 0);
  }

  40% {
    clip-path: inset(63% 0 35% 0);
  }

  60% {
    clip-path: inset(10% 0 82% 0);
  }

  80% {
    clip-path: inset(96% 0 7% 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

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

  50% {
    opacity: 0.3;
  }
}

/* CRT effects */
.scanlines {
  display: none !important;
}

.crt-flicker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 255 255 / 3%);
  z-index: 9;
  pointer-events: none;
  animation: flicker 0.3s infinite alternate;
}

@keyframes flicker {
  0% {
    opacity: 0.1;
  }

  100% {
    opacity: 0.05;
  }
}

/* Boot screen styles */
.boot-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #0ff;
  font-family: 'VT323', monospace;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
  padding: 0;
}

.profile-container {
  margin-bottom: 20px;
  max-width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.boot-log {
  width: 80%;
  max-width: 400px;
  height: 50%;
  overflow: hidden;
  margin: 0 auto;
  padding: 20px;
  background-color: rgb(0 0 0 / 70%);
  border: 2px solid #0ff;
  box-shadow: 0 0 20px rgb(0 255 255 / 50%);
  white-space: pre-wrap;
  line-height: 1.5;
  position: relative;
}

.progress-container {
  width: 80%;
  max-width: 800px;
  height: 20px;
  background-color: rgb(0 0 0 / 70%);
  border: 2px solid #0ff;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #0ff;
  transition: width 0.3s ease;
}

/* Profile Image Effects */
.profile-image {
  border-radius: 50%;
  border: 2px solid #0ff;
  box-shadow: 0 0 15px rgb(0 255 255 / 70%);
  object-fit: cover;
  position: relative;
  z-index: 2;
}

.image-glow-effect {
  background: radial-gradient(
    circle,
    rgb(0 255 255 / 70%) 0%,
    rgb(0 255 255 / 0%) 70%
  );
  animation: pulse 2s infinite;
}

.pulsing-glow {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.3;
    transform: scale(0.95) translateX(-50%);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.05) translateX(-50%);
  }

  100% {
    opacity: 0.3;
    transform: scale(0.95) translateX(-50%);
  }
}

/* Mode Selector Screen */
.mode-selector {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99;
  padding: 2rem;
}

.mode-selector-content {
  text-align: center;
  max-width: 600px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.mode-title {
  font-family: 'VT323', monospace;
  font-size: 2.5rem;
  color: #0ff;
  text-shadow: 0 0 10px rgb(0 255 255 / 70%);
  margin-bottom: 3rem;
  letter-spacing: 3px;
  font-weight: normal;
}

.mode-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.mode-option {
  background: rgba(0, 255, 255, 0.05);
  border: 2px solid #0ff;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'VT323', monospace;
  color: #0ff;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0.5rem 1rem;
  align-items: center;
  font-size: 1.2rem;
}

.mode-option:hover,
.mode-option:focus {
  background: rgba(0, 255, 255, 0.15);
  box-shadow: 0 0 20px rgb(0 255 255 / 50%);
  transform: translateX(10px);
  border-color: #ff00ff;
}

.mode-key {
  grid-row: 1 / 3;
  font-size: 2rem;
  color: #ff00ff;
  text-shadow: 0 0 10px rgb(255 0 255 / 70%);
  font-weight: bold;
}

.mode-name {
  grid-column: 2;
  font-size: 1.5rem;
  letter-spacing: 2px;
  align-self: end;
}

.mode-desc {
  grid-column: 2;
  font-size: 1rem;
  color: #a991ff;
  align-self: start;
}

.mode-hint {
  font-size: 1.1rem;
  color: #a991ff;
  text-shadow: 0 0 5px rgb(169 145 255 / 50%);
  font-family: 'VT323', monospace;
}

/* Skip Indicator */
.skip-indicator {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: rgba(0, 255, 255, 0.1);
  border: 2px solid #0ff;
  padding: 0.75rem 1.5rem;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  color: #0ff;
  text-shadow: 0 0 10px rgb(0 255 255 / 70%);
  z-index: 10000;
  animation: skipPulse 2s infinite;
}

.key-highlight {
  color: #ff00ff;
  text-shadow: 0 0 10px rgb(255 0 255 / 70%);
  font-weight: bold;
  padding: 0 0.25rem;
}

@keyframes skipPulse {
  0%,
  100% {
    opacity: 0.6;
    box-shadow: 0 0 10px rgb(0 255 255 / 30%);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 20px rgb(0 255 255 / 60%);
  }
}

/* Glitch Effects */
.glitch-img {
  animation: glitch-anim 0.2s steps(2) forwards;
}

@keyframes glitch-anim {
  0% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }

  20% {
    transform: translate(-8px, 8px);
    filter: hue-rotate(90deg) saturate(2);
  }

  40% {
    transform: translate(-8px, -8px);
    filter: hue-rotate(180deg) saturate(1.5);
  }

  60% {
    transform: translate(8px, 8px);
    filter: hue-rotate(270deg) saturate(3);
  }

  80% {
    transform: translate(8px, -8px);
    filter: hue-rotate(360deg) saturate(2);
  }

  100% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
}

.extreme-rgb-split {
  position: relative;
  /* More dramatic RGB split with glow for impact */
  text-shadow:
    -4px 0 rgba(255, 0, 0, 0.8),
    -2px 0 rgba(255, 0, 0, 0.6),
    0 0 8px rgba(255, 0, 0, 0.4),
    4px 0 rgba(0, 255, 0, 0.8),
    2px 0 rgba(0, 255, 0, 0.6),
    0 0 8px rgba(0, 255, 0, 0.4),
    0 0 4px rgba(0, 255, 255, 0.6);
  animation: rgb-split-intense 0.15s ease-in-out infinite alternate;
}

@keyframes rgb-split-intense {
  0% {
    text-shadow:
      -3px 0 rgba(255, 0, 0, 0.9),
      -1px 0 rgba(255, 0, 0, 0.6),
      0 0 10px rgba(255, 0, 0, 0.5),
      3px 0 rgba(0, 255, 0, 0.9),
      1px 0 rgba(0, 255, 0, 0.6),
      0 0 10px rgba(0, 255, 0, 0.5),
      0 0 6px rgba(0, 255, 255, 0.8);
  }

  100% {
    text-shadow:
      -6px 0 rgba(255, 0, 0, 1),
      -3px 0 rgba(255, 0, 0, 0.7),
      0 0 15px rgba(255, 0, 0, 0.6),
      6px 0 rgba(0, 255, 0, 1),
      3px 0 rgba(0, 255, 0, 0.7),
      0 0 15px rgba(0, 255, 0, 0.6),
      0 0 10px rgba(0, 255, 255, 1);
  }
}

.glitch-blocks {
  position: relative;
  animation: glitch-blocks 0.2s steps(2) forwards;
}

@keyframes glitch-blocks {
  0% {
    clip-path: inset(20% 0 40% 0);
  }

  20% {
    clip-path: inset(60% 0 10% 0);
  }

  40% {
    clip-path: inset(30% 0 70% 0);
  }

  60% {
    clip-path: inset(10% 0 50% 0);
  }

  80% {
    clip-path: inset(40% 0 20% 0);
  }

  100% {
    clip-path: inset(0 0 0 0);
  }
}

.wave-distortion {
  animation: wave-distortion 0.5s forwards;
}

@keyframes wave-distortion {
  0% {
    transform: skew(0deg, 0deg);
  }

  20% {
    transform: skew(2deg, 1deg);
  }

  40% {
    transform: skew(-2deg, -1deg);
  }

  60% {
    transform: skew(1deg, 2deg);
  }

  80% {
    transform: skew(-1deg, -2deg);
  }

  100% {
    transform: skew(0deg, 0deg);
  }
}

.progress-glitch {
  animation: progress-glitch 0.2s steps(2) forwards;
}

@keyframes progress-glitch {
  0% {
    transform: translateX(0);
  }

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

  50% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}

.final-message {
  color: #f0f;
  font-weight: bold;
  font-size: 1.5em;
  /* More dramatic final message glow */
  text-shadow:
    0 0 10px rgba(255, 0, 255, 1),
    0 0 20px rgba(255, 0, 255, 0.8),
    0 0 30px rgba(255, 0, 255, 0.6),
    0 0 40px rgba(255, 0, 255, 0.4);
  animation: final-message-intense 0.6s ease-in-out infinite alternate;
  letter-spacing: 3px;
}

@keyframes final-message-intense {
  0% {
    text-shadow:
      0 0 15px rgba(255, 0, 255, 1),
      0 0 30px rgba(255, 0, 255, 0.9),
      0 0 45px rgba(255, 0, 255, 0.7),
      0 0 60px rgba(255, 0, 255, 0.5);
    transform: scale(1);
  }

  100% {
    text-shadow:
      0 0 20px rgba(255, 0, 255, 1),
      0 0 40px rgba(255, 0, 255, 1),
      0 0 60px rgba(255, 0, 255, 0.8),
      0 0 80px rgba(255, 0, 255, 0.6),
      0 0 100px rgba(255, 0, 255, 0.4);
    transform: scale(1.05);
  }
}

.glitch-transition-out {
  animation: glitch-transition-out 0.5s forwards;
}

@keyframes glitch-transition-out {
  0% {
    transform: translate(0);
    filter: hue-rotate(0deg);
  }

  20% {
    transform: translate(-10px, 10px);
    filter: hue-rotate(90deg);
  }

  40% {
    transform: translate(-10px, -10px);
    filter: hue-rotate(180deg);
  }

  60% {
    transform: translate(10px, 10px);
    filter: hue-rotate(270deg);
  }

  80% {
    transform: translate(10px, -10px);
    filter: hue-rotate(360deg);
  }

  100% {
    transform: translate(0);
    filter: hue-rotate(0deg);
    opacity: 0;
  }
}

/* Enhanced profile image effects */
.profile-glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0.5;
  mix-blend-mode: screen;
}

.layer-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.layer-glitching {
  animation: layer-glitch 0.3s steps(3) infinite;
}

@keyframes layer-glitch {
  0% {
    transform: translate(0);
  }

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

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

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

  100% {
    transform: translate(0);
  }
}

.extreme-glitch {
  animation: extreme-glitch 0.2s steps(2) infinite;
}

@keyframes extreme-glitch {
  0% {
    transform: translate(0);
    filter: hue-rotate(0deg) saturate(1);
  }

  25% {
    transform: translate(-15px, 15px);
    filter: hue-rotate(90deg) saturate(3);
  }

  50% {
    transform: translate(15px, -15px);
    filter: hue-rotate(180deg) saturate(2);
  }

  75% {
    transform: translate(-12px, -8px);
    filter: hue-rotate(270deg) saturate(4);
  }

  100% {
    transform: translate(0);
    filter: hue-rotate(0deg) saturate(1);
  }
}

.fractal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 30%,
      rgb(0 255 255 / 80%) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 70% 70%,
      rgb(255 0 255 / 80%) 0%,
      transparent 20%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgb(255 255 0 / 50%) 0%,
      transparent 40%
    ),
    radial-gradient(circle at 20% 80%, rgb(0 255 0 / 60%) 0%, transparent 30%);
  mix-blend-mode: screen;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}

.fractal-active {
  opacity: 0.9;
  animation: fractal-pulse 0.5s ease-in-out;
}

@keyframes fractal-pulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }

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

.pixel-manipulation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 4;
  opacity: 0.8;
  mix-blend-mode: screen;
  pointer-events: none;
}

.geometric-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}

.geo-shape {
  position: absolute;
  border: 1px solid rgb(0 255 255 / 70%);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: geo-float 5s infinite alternate ease-in-out;
}

.geo-circle {
  border-radius: 50%;
}

.geo-triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.geo-square {
  /* Default shape is square */
}

@keyframes geo-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(15px, 15px) rotate(60deg);
  }
}

/* Responsive adjustments */
@media (width <= 768px) {
  .splash-screen {
    padding: clamp(24px, 5vh, 48px) 16px;
    height: auto;
    min-height: 100vh;
    justify-content: center;
  }

  @supports (min-height: 100dvh) {
    .splash-screen {
      min-height: 100dvh;
    }
  }

  .landing-content {
    margin: 0 auto;
    padding: 0;
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .logo-container {
    margin-top: 0;
    margin-bottom: 1.5rem;
  }

  .landing-title {
    font-size: 1.8rem;
    letter-spacing: 1.2px;
    width: fit-content;
    max-width: 100%;
  }

  .prompt-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .boot-log {
    width: 95%;
    font-size: 16px;
  }

  .progress-container {
    width: 95%;
  }

  .profile-container {
    max-width: 95%;
  }

  /* Mode selector mobile styles */
  .mode-selector-content {
    padding: 1rem;
    max-width: 100%;
  }

  .mode-title {
    font-size: 1.8rem;
    margin-bottom: 2rem;
  }

  .mode-option {
    padding: 1rem;
    font-size: 1rem;
  }

  .mode-key {
    font-size: 1.5rem;
  }

  .mode-name {
    font-size: 1.2rem;
  }

  .mode-desc {
    font-size: 0.9rem;
  }

  .mode-hint {
    font-size: 1rem;
  }

  .skip-indicator {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    text-align: center;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}

@media (width <= 600px) {
  .landing-title {
    max-width: min(22ch, 100%);
    width: 100%;
  }
}

@media (width <= 480px) {
  .landing-title {
    font-size: 1.4rem;
  }

  .prompt {
    font-size: 0.9rem;
  }

  .progress-container {
    height: 6px;
  }
}

@keyframes mobile-boot-fade-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mobile-boot-log-reveal {
  from {
    opacity: 0.65;
    filter: blur(1px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@media (width <= 768px) {
  .boot-screen {
    position: fixed;
    inset: 0;
    transform: none;
    width: 100vw;
    height: 100vh;
    min-height: 100dvh;
    padding: calc(env(safe-area-inset-top, 0) + 18px) 24px
      calc(env(safe-area-inset-bottom, 0) + 32px);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }

  .boot-screen.mobile-boot-animating {
    animation: mobile-boot-fade-in 0.45s ease forwards;
  }

  .boot-screen .boot-log,
  .boot-screen .progress-container {
    width: min(420px, 100%);
    margin-left: auto;
    margin-right: auto;
  }

  .boot-screen .boot-log {
    min-height: 260px;
    height: auto;
  }

  .boot-screen.mobile-boot-animating .boot-log {
    animation: mobile-boot-log-reveal 0.45s ease forwards;
  }

  .boot-screen.mobile-boot-animating .progress-bar {
    transition: width 0.45s ease !important;
  }
}

/* Degauss animation */
.degauss-effect {
  animation:
    degauss 0.6s ease-in-out,
    screen-shake 0.6s ease-in-out;
}

.degauss-effect::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgb(255 255 255 / 90%) 0%,
      rgb(255 255 255 / 0%) 70%
    ),
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.5 0"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  background-size: cover;
  opacity: 0.4;
  pointer-events: none;
  animation: degauss-noise 0.6s forwards;
}

@keyframes degauss {
  0% {
    filter: contrast(1.5) brightness(1.3) hue-rotate(0deg);
    transform: scale(1) rotate(0deg);
  }

  30% {
    filter: contrast(0.5) brightness(1.8) hue-rotate(270deg);
    transform: scale(0.8) rotate(2deg);
  }

  60% {
    filter: contrast(3) brightness(0.8) hue-rotate(45deg);
    transform: scale(1.2) rotate(-2deg);
  }

  100% {
    filter: none;
    transform: scale(1) rotate(0deg);
  }
}

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

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

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

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

  80% {
    transform: translate(3px, 3px);
  }
}

@keyframes degauss-noise {
  0% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}