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

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* --- слои хоррора --- */
#staticCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  opacity: 0.55;
  z-index: 40;
}

#static {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 41;
}

#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 42;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.85) 100%);
}

#flicker {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 43;
  background: rgba(180, 200, 255, 0.04);
  animation: flicker 4s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 0.3; }
  8% { opacity: 0.9; }
  10% { opacity: 0.2; }
  30% { opacity: 0.5; }
  32% { opacity: 0.1; }
  70% { opacity: 0.6; }
  72% { opacity: 0.15; }
}

#game {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 10;
}


.hidden { display: none !important; }

/* --- надписи --- */
#hint {
  color: #6b1010;
  font-size: 20px;
  letter-spacing: 4px;
  text-transform: uppercase;
  animation: pulse 2s infinite;
  text-shadow: 0 0 8px rgba(180, 0, 0, 0.6);
}

#counter {
  color: #444;
  font-size: 16px;
  letter-spacing: 2px;
}

@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* --- кнопки --- */
.btn {
  border: none;
  cursor: pointer;
  border-radius: 50%;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: transform 0.08s;
  filter: saturate(1.1) brightness(0.95);
}

.btn:active { transform: scale(0.9); }

.red {
  width: 170px;
  height: 170px;
  font-size: 17px;
  background: radial-gradient(circle at 35% 30%, #d32f2f, #7f0000 60%, #3d0000);
  animation: redGlow 2.4s infinite;
}

@keyframes redGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(160, 0, 0, 0.5); }
  50% { box-shadow: 0 0 60px rgba(255, 0, 0, 0.75); }
}

/* --- злость (тряска) --- */
.angry, .bossAngry {
  animation: redGlow 1.4s infinite, angry 0.1s infinite;
}

.blue.bossAngry {
  animation: blueGlow 1s infinite, angry 0.09s infinite;
}

@keyframes angry {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-5px, 3px) rotate(-3deg); }
  50% { transform: translate(5px, -3px) rotate(3deg); }
  75% { transform: translate(-3px, -5px) rotate(-2deg); }
  100% { transform: translate(3px, 5px) rotate(2deg); }
}

.shake { animation: shake 0.4s; }

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 5px); }
  40% { transform: translate(10px, -5px); }
  60% { transform: translate(-8px, -5px); }
  80% { transform: translate(8px, 5px); }
}

/* --- босс --- */
#bossWrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#bossCount {
  color: #1565c0;
  font-size: 16px;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(0, 100, 255, 0.7);
}

.blue {
  width: 190px;
  height: 190px;
  background: radial-gradient(circle at 35% 30%, #42a5f5, #0d47a1 60%, #061e3d);
}

@keyframes blueGlow {
  0%, 100% { box-shadow: 0 0 40px rgba(0, 60, 180, 0.6); }
  50% { box-shadow: 0 0 80px rgba(0, 100, 255, 0.9); }
}

/* --- финал --- */
#winScreen {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 50;
}

#winTitle {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 8px;
  color: #ddd;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
  animation: winPop 0.6s ease-out, flicker 3s infinite;
}

@keyframes winPop {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

/* --- надпись «я вернусь» --- */
#returnText {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 10px;
  color: #8b0000;
  text-transform: lowercase;
  z-index: 60;
  pointer-events: none;
  text-shadow: 0 0 18px rgba(200, 0, 0, 0.9), 2px 0 0 rgba(0, 255, 255, 0.35), -2px 0 0 rgba(255, 0, 0, 0.35);
  animation: returnGlitch 1.6s infinite;
  opacity: 0;
  transition: opacity 1.2s;
}

#returnText.show { opacity: 1; }

@keyframes returnGlitch {
  0%, 100% { transform: translate(-50%, -50%) skewX(0deg); }
  10% { transform: translate(-52%, -49%) skewX(-4deg); }
  20% { transform: translate(-48%, -51%) skewX(3deg); }
  30% { transform: translate(-50%, -50%) skewX(0deg); }
  55% { transform: translate(-51%, -50%) skewX(2deg); }
  75% { transform: translate(-49%, -51%) skewX(-2deg); }
}

/* --- кнопка сброса сбоку --- */
#resetBtn {
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  padding: 14px 12px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #666;
  background: #0a0a0a;
  border: 1px solid #262626;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  z-index: 60;
}

#resetBtn:hover {
  color: #ff5252;
  border-color: #ff5252;
  background: #140808;
}

/* --- взрыв --- */
#boom {
  position: absolute;
  font-size: 140px;
  z-index: 40;
  animation: boom 0.7s ease-out forwards;
  pointer-events: none;
}

@keyframes boom {
  0% { transform: scale(0.2); opacity: 1; }
  60% { transform: scale(2.2); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}