/* TAPsignal · NEAR-MISS UX · v95.54
 * Triggers when boss timer hits 0 with exactly 1 piece left AND the
 * player has ≥50 Echoes AND hasn't been offered already this run.
 * Modal floats over the stage with a "TRY WITH +3s · 50 ◆" CTA.
 *
 * Player taps CTA → spend 50 ◆, extend bossTimerEndsAt, dismiss modal,
 * resume game. Player taps "NO THANKS" → call endBoss('expired') as normal.
 *
 * Visual language matches the cymatic identity: red pulse for the
 * "ONE PIECE LEFT" header (failure mood), turquoise for the CTA
 * (the same "TAP HERE NEXT" color used by tutorial halos + slot
 * spotlights · familiar visual rhyme).
 */

.nm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: radial-gradient(ellipse at center,
    rgba(80, 6, 6, 0.65) 0%,
    rgba(2, 5, 7, 0.85) 70%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  animation: nm-back-in 220ms ease-out;
}
@keyframes nm-back-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nm-title {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #FF2A2A;
  text-shadow:
    0 0 8px  #FF2A2A,
    0 0 18px #FF2A2A,
    0 0 36px rgba(255, 42, 42, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.85);
  text-align: center;
  margin: 0 0 8px;
  animation: nm-title-pulse 280ms steps(1) 6;
}
@keyframes nm-title-pulse {
  0%, 100% { opacity: 1.00; transform: scale(1.00); }
  50%      { opacity: 0.55; transform: scale(1.06); }
}

.nm-sub {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #87B8A0;
  text-align: center;
  margin: 0 0 28px;
}

.nm-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 30px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1AE5C5;
  background: rgba(2, 5, 7, 0.7);
  border: 2px solid #1AE5C5;
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms, box-shadow 160ms, background 160ms;
  text-shadow: 0 0 8px #1AE5C5, 0 0 18px rgba(26, 229, 197, 0.6);
  box-shadow:
    0 0 0 4px rgba(26, 229, 197, 0.18),
    0 0 28px rgba(26, 229, 197, 0.45);
  margin-bottom: 14px;
}
.nm-cta:active {
  transform: scale(0.96);
  background: rgba(26, 229, 197, 0.18);
}
.nm-cta:hover, .nm-cta:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 6px rgba(26, 229, 197, 0.32),
    0 0 36px rgba(26, 229, 197, 0.7);
}
.nm-cta-label   { font-size: 18px; }
.nm-cta-cost    {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #FFC56E;
  text-shadow: 0 0 6px rgba(255, 197, 110, 0.5);
}

.nm-decline {
  margin-top: 12px;
  padding: 8px 18px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(170, 170, 187, 0.7);
  background: transparent;
  border: 1px solid rgba(170, 170, 187, 0.25);
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nm-decline:hover, .nm-decline:focus-visible {
  color: rgba(170, 170, 187, 1);
  border-color: rgba(170, 170, 187, 0.5);
  outline: none;
}

.nm-balance {
  margin-top: 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(135, 184, 160, 0.7);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .nm-backdrop  { animation: none; }
  .nm-title     { animation: none; opacity: 1; }
}

@media (max-width: 380px) {
  .nm-title { font-size: 26px; }
  .nm-sub   { font-size: 11px; margin-bottom: 20px; }
  .nm-cta   { padding: 14px 24px; font-size: 14px; }
}