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

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  font-family: "Special Elite", "Courier New", monospace;
  color: #f2e6e6;
}

/* Only one page is visible at a time */
.page {
  display: none;
  position: fixed;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.page.active {
  display: flex;
  animation: fade-in 1.2s ease;
}

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

/* ---------- Page 1: red screen of death ---------- */

#page-name {
  background: radial-gradient(ellipse at center, #6e0000 0%, #3a0000 60%, #160000 100%);
  padding: 16px;
}

/* scanlines */
#page-name::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.25) 0px,
    rgba(0, 0, 0, 0.25) 1px,
    transparent 2px,
    transparent 4px
  );
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.85; }
  47%      { opacity: 0.4; }
  49%      { opacity: 0.9; }
  80%      { opacity: 0.75; }
}

.name-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 560px;
  padding: 40px 24px;
  border: 2px solid #ff1a1a;
  background: rgba(10, 0, 0, 0.75);
  box-shadow: 0 0 25px rgba(255, 0, 0, 0.45), inset 0 0 40px rgba(120, 0, 0, 0.6);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 25px rgba(255, 0, 0, 0.45), inset 0 0 40px rgba(120, 0, 0, 0.6); }
  50%      { box-shadow: 0 0 55px rgba(255, 0, 0, 0.8),  inset 0 0 60px rgba(160, 0, 0, 0.8); }
}

.question {
  font-family: "Creepster", "Special Elite", cursive;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  letter-spacing: 2px;
  line-height: 1.25;
  text-align: center;
  color: #ff2b2b;
  text-shadow: 0 0 8px #ff0000, 2px 2px 0 #000;
  animation: shake 6s infinite;
}

@keyframes shake {
  0%, 92%, 100% { transform: translate(0, 0); }
  93% { transform: translate(-2px, 1px); }
  94% { transform: translate(3px, -1px); }
  95% { transform: translate(-1px, 2px); }
  96% { transform: translate(2px, 0); }
}

#name-input {
  width: 240px;
  max-width: 100%;
  padding: 10px 0;
  font-family: inherit;
  font-size: 2.4rem;
  letter-spacing: 14px;
  text-indent: 14px;
  text-align: center;
  text-transform: uppercase;
  color: #ff3b3b;
  background: #0a0000;
  border: none;
  border-bottom: 3px solid #ff1a1a;
  outline: none;
  caret-color: #ff0000;
}

#name-input:focus {
  box-shadow: 0 8px 20px -8px rgba(255, 0, 0, 0.9);
}

.enter-btn {
  font-family: inherit;
  font-size: 1.1rem;
  letter-spacing: 6px;
  padding: 10px 28px;
  color: #ff2b2b;
  background: transparent;
  border: 1px solid #ff1a1a;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.enter-btn:hover,
.enter-btn:focus-visible {
  background: #ff1a1a;
  color: #000;
  outline: none;
}

/* ---------- Wrong name: the smiler ---------- */

#page-wrong {
  background: #000;
}

#smiler {
  width: min(60vw, 420px);
  height: auto;
  cursor: pointer;
  /* fade the grey edges of the picture into the black */
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%);
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 72%);
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    filter: brightness(0.9); }
  50%      { transform: scale(1.06); filter: brightness(1.2); }
}

/* ---------- Image scenes ---------- */

.scene {
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  align-items: flex-end;
  padding: 0 16px 10vh;
}

.scene-text {
  font-family: "Creepster", "Special Elite", cursive;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 3px;
  text-align: center;
  color: #e8e8e8;
  text-shadow: 0 0 12px rgba(255, 0, 0, 0.9), 0 0 2px #000, 3px 3px 0 #000;
  background: none;
  border: none;
  cursor: pointer;
  animation: text-flicker 3s infinite;
}

.scene-text:hover,
.scene-text:focus-visible {
  color: #ff3b3b;
  outline: none;
}

.scene-text.final {
  cursor: default;
}

.scene-text.final:hover {
  color: #e8e8e8;
}

@keyframes text-flicker {
  0%, 100% { opacity: 1; }
  41%      { opacity: 1; }
  42%      { opacity: 0.3; }
  43%      { opacity: 1; }
  70%      { opacity: 0.85; }
  71%      { opacity: 0.2; }
  73%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before {
    animation: none !important;
  }
}