/* style.css - VFX-enhanced styling for Click the Target */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(120deg,#061026 0%, #1b0b2a 50%, #070b26 100%); background-size:300% 300%; animation: gradientShift 12s linear infinite; color:#e6eefc; display:flex; align-items:center; justify-content:center; height:100vh; margin:0; position:relative; overflow:hidden; }

/* ambient layered VFX */
body::before {
  content: "";
  position: absolute;
  inset: -20% -10% -20% -10%;
  background: radial-gradient(ellipse at 10% 10%, rgba(120,70,200,0.12), transparent 12%), radial-gradient(ellipse at 90% 90%, rgba(40,180,200,0.08), transparent 12%);
  pointer-events: none;
  z-index: 0;
  transform: translateZ(0);
  animation: ambientShift 18s linear infinite;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.00) 28px), radial-gradient(circle at 80% 70%, rgba(255,160,220,0.02) 0px, rgba(255,255,255,0.00) 36px);
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
  animation: particlesFloat 10s linear infinite;
}

@keyframes ambientShift {
  0% { transform: translate3d(-3%, 0, 0) scale(1.02); }
  50% { transform: translate3d(3%, -1.5%, 0) scale(1.01); }
  100% { transform: translate3d(-3%, 0, 0) scale(1.02); }
}

@keyframes particlesFloat {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* subtle animated vignette and noise */
.container::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0 60px 160px rgba(5,6,12,0.6), inset 0 -30px 120px rgba(10,6,20,0.4);
  pointer-events: none;
  z-index: 4;
}

/* faint moving sparkles using repeated radial-gradients */
@keyframes sparkleMove {
  0% { background-position: 0% 0%, 100% 100%, 50% 30%; }
  50% { background-position: 20% 10%, 80% 90%, 60% 40%; }
  100% { background-position: 0% 0%, 100% 100%, 50% 30%; }
}

body .sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 10% 10%, rgba(255,255,255,0.08), transparent 30%), radial-gradient(2px 2px at 80% 30%, rgba(255,200,255,0.06), transparent 30%), radial-gradient(2px 2px at 40% 80%, rgba(170,240,255,0.05), transparent 30%);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: sparkleMove 14s linear infinite;
}

/* ensure content renders above VFX layers */
.container { position:relative; z-index:10; }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.container { text-align:center; max-width:820px; width:100%; padding:20px; }

/* sound toggle in container top-right */
.sound-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  pointer-events: auto;
  background: rgba(255,255,255,0.04);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}
.sound-toggle:hover { transform: translateY(-3px); background: rgba(255,255,255,0.06); }
.sound-toggle.muted { background: linear-gradient(90deg, rgba(200,60,80,0.12), rgba(120,40,60,0.08)); color: #ffd6d6; }

.title { font-size: clamp(22px, 4.5vw, 48px); margin:6px 0 2px; letter-spacing:1px; background: linear-gradient(90deg,#fff 0%, #ffd6ea 30%, #c7a0ff 60%, #6effff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; text-shadow: 0 6px 30px rgba(160,90,220,0.25); animation: neonPulse 3s ease-in-out infinite; }

@keyframes neonPulse {
  0% { filter: drop-shadow(0 6px 18px rgba(200,120,255,0.08)); transform: translateY(0); }
  50% { filter: drop-shadow(0 12px 36px rgba(200,120,255,0.16)); transform: translateY(-2px); }
  100% { filter: drop-shadow(0 6px 18px rgba(200,120,255,0.08)); transform: translateY(0); }
}

.instructions { font-size:15px; color:rgba(230,238,252,0.95); margin-bottom:10px; position:relative; }
.instructions:after { content:""; position:absolute; left:50%; bottom:-6px; width:60%; height:2px; transform:translateX(-50%); background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(199,160,255,0.14)); border-radius:2px; box-shadow:0 6px 20px rgba(180,90,220,0.06); }

.hud { display:flex; gap:16px; justify-content:center; margin:8px 0 14px; font-weight:800; color:#fff; }
.hud-item { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); padding:10px 16px; border-radius:14px; border:1px solid rgba(255,255,255,0.06); min-width:110px; text-align:center; position:relative; overflow:hidden; }
.hud-item .label { font-size:10px; letter-spacing:1px; color:rgba(255,255,255,0.7); margin-bottom:6px; }
.hud-item .value { font-size:20px; font-weight:900; color:#fff; text-shadow:0 6px 18px rgba(200,120,255,0.14); }
.hud-item .unit { font-size:12px; color:rgba(255,255,255,0.65); margin-left:6px; }

.hud-item:before { content:""; position:absolute; left:-40%; top:-20%; width:180%; height:120%; background:linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.18) 48%, rgba(255,255,255,0.04) 100%); transform:rotate(18deg); opacity:0.06; pointer-events:none; }
.hud-pop { transform: scale(1.12); transition: transform 220ms cubic-bezier(.2,.9,.2,1); text-shadow:0 10px 40px rgba(255,160,220,0.28); }

@media (max-width:700px) { .hud-item { min-width:80px; padding:8px 10px; } .title { font-size: clamp(20px, 7vw, 36px); } }
.game-wrap { position:relative; display:block; max-width:900px; margin:0 auto; }
canvas { background:transparent; border-radius:12px; display:block; margin:12px auto; box-shadow:0 10px 40px rgba(0,0,0,0.6), 0 0 40px rgba(200,80,200,0.06) inset; width:100%; height:auto; border:1px solid rgba(255,255,255,0.04); }
.game-overlay { position:absolute; left:0; right:0; top:0; bottom:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.game-overlay.active { pointer-events:auto; }
.game-overlay .big-start { pointer-events:auto; }
.countdown { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:84px; font-weight:900; color:#fff; text-shadow:0 10px 40px rgba(200,80,200,0.28); background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); padding:20px 30px; border-radius:18px; }
@media (max-width:700px) { .countdown { font-size:48px; padding:12px 18px; } }
button { padding:8px 14px; font-size:16px; cursor:pointer; margin:0 6px; border-radius:8px; border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); color:#fff; box-shadow:0 4px 14px rgba(0,0,0,0.35); }
.big-start { position:relative; padding: clamp(14px, 2.5vw, 36px); font-size: clamp(20px, 4vw, 56px); font-weight:900; cursor:pointer; margin:0 6px; border-radius: clamp(10px, 1.6vw, 24px); border:none; color:#0b0311; background:linear-gradient(90deg,#ffd6ea 0%, #c7a0ff 50%, #6effff 100%); box-shadow:0 12px 40px rgba(179,107,255,0.26), 0 0 22px rgba(110,255,255,0.08) inset; transition: transform .12s ease, box-shadow .12s ease; animation: pulseGlow 2.6s ease-in-out infinite; min-width: 28vw; }
.big-start:hover { transform: translateY(-3px) scale(1.02); }
.big-start:active { transform: translateY(0) scale(0.99); }
@keyframes pulseGlow { 0% { box-shadow:0 8px 20px rgba(179,107,255,0.12); } 50% { box-shadow:0 14px 36px rgba(179,107,255,0.28); } 100% { box-shadow:0 8px 20px rgba(179,107,255,0.12); } }
.footer { font-size:14px; opacity:0.95; color:rgba(230,238,252,0.85); margin-top:12px; }
@media (max-width:700px) { canvas { width:100%; height:auto; } .countdown { font-size:48px; padding:12px 18px; } }