/* ════════════════════════════════════════════════════════
   by-jn wiggle game — game.css
   ════════════════════════════════════════════════════════ */

/* Cursor sits above everything including the game */
#cur  { z-index: 99999 !important; }
#ring { z-index: 99998 !important; }

#jn-game-overlay {
  position: fixed; inset: 0; z-index: 99000;
  pointer-events: none; opacity: 0;
  transition: opacity .6s cubic-bezier(.16,1,.3,1);
}
#jn-game-overlay.active {
  pointer-events: all;
  opacity: 1;
}

/* Shader background — mirrors hero */
#jn-game-bg {
  position: absolute; inset: 0;
  background: #DDDCC8;
  overflow: hidden;
}
#jn-game-bg::before {
  content: '';
  position: absolute; inset: -60%;
  width: 220%; height: 220%;
  background:
    radial-gradient(ellipse 70% 70% at 25% 40%, rgba(6,71,78,.82)    0%, rgba(6,71,78,.28)    38%, transparent 65%),
    radial-gradient(ellipse 75% 75% at 82% 78%, rgba(35,33,78,.6)    0%, rgba(35,33,78,.2)    42%, transparent 68%),
    radial-gradient(ellipse 85% 55% at 55%  5%, rgba(237,235,216,.96) 0%, rgba(237,235,216,.4) 42%, transparent 70%);
  animation: wash1 20s ease-in-out infinite alternate;
}
#jn-game-bg::after {
  content: '';
  position: absolute; inset: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(ellipse 65% 65% at 70% 25%, rgba(6,71,78,.5)    0%, rgba(6,71,78,.15)  42%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 12% 80%, rgba(35,33,78,.45)  0%, rgba(35,33,78,.12) 42%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 48% 50%, rgba(237,235,216,.45) 0%, transparent 60%);
  animation: wash2 28s ease-in-out infinite alternate;
}

/* Grain */
#jn-game-grain {
  position: absolute; inset: -200%;
  width: 400%; height: 400%;
  opacity: .025; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(3) infinite;
}

#jn-game-canvas {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; /* overlay handles all clicks/touches */
}

/* Score */
#jn-score {
  position: absolute; top: 40px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 13px; letter-spacing: .3em;
  color: rgba(35,33,78,.4);
  z-index: 3; text-align: center;
  pointer-events: none;
}
#jn-score-num {
  font-size: 72px; letter-spacing: .04em;
  color: #23214E; display: block;
  line-height: 1; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* High score */
#jn-high-score {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 13px; letter-spacing: .22em;
  color: rgba(35,33,78,.35);
  display: block; margin-top: 6px;
  min-height: 1em;
}

/* Exit hint */
#jn-exit-hint {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 11px; letter-spacing: .22em;
  color: rgba(35,33,78,.28);
  z-index: 3; white-space: nowrap;
  pointer-events: none;
}

/* Desktop cursor hint — cryptic */
#jn-wiggle-hint {
  position: fixed; pointer-events: none; z-index: 98000;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 11px; letter-spacing: .18em;
  color: #06474E; opacity: 0;
  transform: translate(-50%, -34px);
  white-space: nowrap;
  transition: opacity .8s;
}

/* Mobile toast hint — slides up from bottom */
#jn-mob-hint {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 12px; letter-spacing: .2em;
  color: rgba(35,33,78,.5);
  background: rgba(237,235,216,.92);
  padding: 10px 20px;
  border-left: 2px solid #06474E;
  opacity: 0; z-index: 98000;
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.16,1,.3,1),
              transform .5s cubic-bezier(.16,1,.3,1);
  -webkit-font-smoothing: antialiased;
}
#jn-mob-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Score bump — spring bounce */
@keyframes jnBump {
  0%   { transform: translateX(-50%) scale(1);   }
  30%  { transform: translateX(-50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1);   }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #jn-game-bg::before, #jn-game-bg::after,
  #jn-game-grain { animation: none; }
  #jn-game-overlay { transition: none; }
  #jn-mob-hint { transition: none; }
}