/* ══════════════════════════════
   Entropic Prelander — Signal Lock
   Vibe: Dark Cinematic × HUD Precision
   ══════════════════════════════ */

:root {
  --cyan:  #00f0ff;
  --red:   #ff2244;
  --gold:  #ffd060;
  --dark:  #07080f;
  --text:  #c8d0e0;
  --font-display: 'Clash Display', 'Space Grotesk', sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dark);
}

/* ─── Game Wrapper ─── */
.game-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--dark);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%2300f0ff' stroke-width='1.5' opacity='0.85'/%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%23000' stroke-width='3' opacity='0.4'/%3E%3Ccircle cx='20' cy='20' r='4' fill='none' stroke='%2300f0ff' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='4' fill='none' stroke='%23000' stroke-width='3' opacity='0.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='14' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='14' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='26' x2='20' y2='38' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='20' y1='26' x2='20' y2='38' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='20' x2='14' y2='20' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='2' y1='20' x2='14' y2='20' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='26' y1='20' x2='38' y2='20' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='26' y1='20' x2='38' y2='20' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%2300f0ff'/%3E%3C/svg%3E") 20 20, crosshair;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.game-wrapper.glitch {
  animation: glitch-shake 0.45s ease forwards;
}

/* ─── Background ─── */
.bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bg-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  user-select: none;
}
.shadow-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.shadow-layer img {
  position: absolute;
  user-select: none;
  height: 80vh;
    left: 12%;
    top: 16%;
  /* left + top: both set by JS to align shadow to target ring in 3.png */
}
/* ─── Shadow Target Ring ─── */
.shadow-ring {
  position: absolute;
  /* left + top: both set by JS to match shadow in 3.png */
  transform: translate(-50%, -50%);
  width: clamp(120px, 20vw, 240px);
  height: clamp(6px, 1.4vh, 16px);
  border: 2px solid rgba(0, 240, 255, 0.55);
  border-radius: 50%;
  box-shadow:
    0 0 16px rgba(0, 240, 255, 0.45),
    inset 0 0 10px rgba(0, 240, 255, 0.15);
  animation: ring-pulse 1.9s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}

/* ─── Moving Character ─── */
.character {
  position: absolute;
  /* left: controlled by JS each frame (horizontal sweep)  */
  /* top:  set once by JS — feet aligned to shadow position */
  height: 80vh;
  width: auto;
  pointer-events: none;
  z-index: 15;
  will-change: left;
   top: 16%;
  filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.25));
}

/* ─── HUD Top Bar ─── */
.hud-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
  z-index: 30;
  background: linear-gradient(to bottom, rgba(7,8,15,0.72) 0%, transparent 100%);
}

.game-label {
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--cyan);
  letter-spacing: 0.22em;
  text-shadow: 0 0 22px rgba(0, 240, 255, 0.65);
}

.attempts-badge {
  font-family: var(--font-body);
  font-size: clamp(10px, 1.3vw, 13px);
  font-weight: 600;
  color: rgba(200, 208, 224, 0.45);
  letter-spacing: 0.14em;
  min-width: 80px;
  text-align: right;
}

/* ─── Instruction ─── */
.instruction {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: clamp(10px, 1.4vw, 13px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.16em;
  white-space: nowrap;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.7s ease;
  animation: inst-pulse 2.6s ease-in-out infinite;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}

.instruction.visible { opacity: 1; }

.inst-dot {
  color: var(--cyan);
  font-size: 1.15em;
  line-height: 1;
}

/* ─── Miss Feedback ─── */
.feedback {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(18px, 3.8vw, 40px);
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
  text-shadow: 0 0 28px rgba(255, 34, 68, 0.85);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}

.feedback.visible {
  opacity: 1;
  animation: feedback-pop 0.18s ease;
}

/* ─── Stop Button ─── */
.stop-btn {
  position: absolute;
  bottom: 7vh;
  left: 50%;
  transform: translateX(-50%);
  padding: clamp(14px, 2.2vh, 22px) clamp(40px, 9vw, 80px);
  background: var(--cyan);
  color: var(--dark);
  font-family: var(--font-display);
  font-size: clamp(14px, 2.1vw, 20px);
  font-weight: 700;
  letter-spacing: 0.22em;
  border: none;
  border-radius: 3px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%2300f0ff' stroke-width='1.5' opacity='0.85'/%3E%3Ccircle cx='20' cy='20' r='17' fill='none' stroke='%23000' stroke-width='3' opacity='0.4'/%3E%3Ccircle cx='20' cy='20' r='4' fill='none' stroke='%2300f0ff' stroke-width='1.5'/%3E%3Ccircle cx='20' cy='20' r='4' fill='none' stroke='%23000' stroke-width='3' opacity='0.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='14' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='20' y1='2' x2='20' y2='14' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='20' y1='26' x2='20' y2='38' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='20' y1='26' x2='20' y2='38' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='20' x2='14' y2='20' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='2' y1='20' x2='14' y2='20' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='26' y1='20' x2='38' y2='20' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='0.4'/%3E%3Cline x1='26' y1='20' x2='38' y2='20' stroke='%2300f0ff' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%2300f0ff'/%3E%3C/svg%3E") 20 20, crosshair;
  z-index: 30;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: btn-pulse 2.2s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.15;
}

.stop-hook {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.85;
}

.stop-value {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.stop-btn.visible { opacity: 1; }

.stop-btn:active { transform: translateX(-50%) scale(0.95); }

/* ─── Atmosphere ─── */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 38%,
    rgba(7, 8, 15, 0.68) 100%
  );
  pointer-events: none;
  z-index: 5;
}

.scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0, 0, 0, 0.055) 3px, rgba(0, 0, 0, 0.055) 4px
  );
  pointer-events: none;
  z-index: 6;
}

/* ─── Success Overlay ─── */
.success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 8, 15, 0.93);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.success-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.success-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 20px);
  padding: clamp(20px, 4vh, 44px) clamp(20px, 5vw, 52px);
  text-align: center;
  max-width: 580px;
  width: 92%;
}

.success-img {
  width: clamp(140px, 28vw, 300px);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(255, 208, 96, 0.5));
}

.success-badge {
  font-family: var(--font-body);
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--cyan);
  text-transform: uppercase;
}

.success-headline {
  font-family: var(--font-display);
  font-size: clamp(30px, 5.5vw, 60px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  text-shadow: 0 0 40px rgba(255, 208, 96, 0.28);
}

.success-sub {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.5vw, 16px);
  color: var(--text);
  line-height: 1.55;
}

.success-cta {
  display: inline-block;
  padding: clamp(14px, 2vh, 20px) clamp(32px, 6vw, 68px);
  background: var(--cyan);
  color: var(--dark);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.9vw, 18px);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 0 28px rgba(0, 240, 255, 0.4);
  animation: cta-glow 2.1s ease-in-out infinite;
  transition: transform 0.12s ease;
}

.success-cta:hover  { transform: scale(1.03); }
.success-cta:active { transform: scale(0.97); }

.countdown-text {
  font-family: var(--font-body);
  font-size: clamp(10px, 1.2vw, 13px);
  color: rgba(200, 208, 224, 0.4);
  letter-spacing: 0.08em;
}

.countdown-num {
  color: var(--cyan);
  font-weight: 700;
}

/* ─── Keyframes ─── */
@keyframes ring-pulse {
  0%, 100% {
    opacity: 0.35;
    box-shadow: 0 0 14px rgba(0,240,255,0.3), inset 0 0 8px rgba(0,240,255,0.1);
  }
  50% {
    opacity: 0.78;
    box-shadow: 0 0 28px rgba(0,240,255,0.65), inset 0 0 14px rgba(0,240,255,0.25);
  }
}

@keyframes glitch-shake {
  0%   { transform: translateX(0)  skewX(0deg);    filter: none; }
  12%  { transform: translateX(-8px) skewX(-1.5deg); filter: hue-rotate(80deg) brightness(1.25); }
  25%  { transform: translateX(7px)  skewX(1deg);    filter: hue-rotate(-80deg); }
  38%  { transform: translateX(-5px) skewX(0deg);    filter: brightness(1.35); }
  52%  { transform: translateX(4px);                 filter: none; }
  65%  { transform: translateX(-3px); }
  78%  { transform: translateX(2px); }
  100% { transform: translateX(0)  skewX(0deg);    filter: none; }
}

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

@keyframes feedback-pop {
  0%   { transform: translate(-50%, -50%) scale(0.8); }
  60%  { transform: translate(-50%, -50%) scale(1.06); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(0,240,255,0.65); }
  50%       { box-shadow: 0 0 0 14px rgba(0,240,255,0); }
}

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,240,255,0.35); }
  50%       { box-shadow: 0 0 44px rgba(0,240,255,0.72); }
}

/* ─── Responsive ─── */
@media (max-width: 480px) {
  .stop-btn {
    width: calc(100% - 40px);
    padding: 16px 0;
    border-radius: 5px;
  }

  .instruction { font-size: 10px; top: 56px; }

  .success-img { width: 58vw; }

  .success-inner { gap: 12px; }
}