/* ═══════════════════════════════════════════════════════════════════
   GARDEN NINJA — full-screen mini-game overlay, launched from the
   tap-4x-to-explode easter egg (garden-hero.css / garden.js).
   Uses global tokens (tokens.css) so it matches the day/night theme.
   ═══════════════════════════════════════════════════════════════════ */

.g-ninja-layer {
  position: fixed;
  inset: 0;
  z-index: 1200; /* above the .g-egg-layer (1000) that spawns it */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  display: flex;
  flex-direction: column;
  touch-action: none; /* swiping the game must not scroll the page */
  /* Stays in the DOM between rounds (lazy singleton) -- without this it
     would silently swallow every dashboard tap/swipe even while invisible. */
  pointer-events: none;
}
.g-ninja-layer.is-open {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .g-ninja-layer {
    transition: opacity 0.25s ease-out;
  }
}

.g-ninja-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* ── HUD ── */
.g-ninja-hud {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0 16px;
  pointer-events: none; /* only the controls themselves are interactive */
}
.g-ninja-hud > * {
  pointer-events: auto;
}
.g-ninja-score {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font: 700 1.1rem/1 'Inter', ui-monospace, monospace;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}
.g-ninja-score .g-ninja-score-label {
  font: 600 0.65rem/1 'Nunito Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 2px;
}
.g-ninja-lives {
  display: flex;
  gap: 4px;
  font-size: 1.15rem;
  line-height: 1;
}
.g-ninja-life {
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.g-ninja-life.is-lost {
  opacity: 0.35;
  transform: scale(0.85);
}

.g-ninja-controls {
  display: flex;
  gap: 8px;
}
.g-ninja-btn {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}
.g-ninja-btn:hover {
  background: var(--surface-2);
}
.g-ninja-btn:active {
  transform: scale(0.92);
}

/* ── Screen shake on missed fruit / near-death ── */
@media (prefers-reduced-motion: no-preference) {
  .g-ninja-layer.is-shaking .g-ninja-canvas {
    animation: g-ninja-shake 0.32s ease-out;
  }
}
@keyframes g-ninja-shake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6px, 3px); }
  40%  { transform: translate(5px, -4px); }
  60%  { transform: translate(-4px, -2px); }
  80%  { transform: translate(3px, 3px); }
  100% { transform: translate(0, 0); }
}

/* ── Game-over panel ── */
.g-ninja-gameover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.g-ninja-gameover.is-visible {
  display: flex;
}
.g-ninja-panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
  padding: 28px 32px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  color: var(--text);
}
@media (prefers-reduced-motion: no-preference) {
  .g-ninja-panel {
    animation: g-ninja-panel-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  }
}
@keyframes g-ninja-panel-in {
  0%   { opacity: 0; transform: scale(0.86) translateY(10px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
.g-ninja-panel h2 {
  margin: 0 0 4px;
  font: 800 1.4rem/1.1 'Bitter', serif;
}
.g-ninja-panel .g-ninja-reason {
  margin: 0 0 16px;
  font: 600 0.85rem/1.3 'Nunito Sans', sans-serif;
  color: var(--text-muted);
}
.g-ninja-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 20px;
}
.g-ninja-stat .g-ninja-stat-value {
  font: 800 1.6rem/1 'Inter', ui-monospace, monospace;
  color: var(--accent);
}
.g-ninja-stat .g-ninja-stat-label {
  margin-top: 2px;
  font: 600 0.65rem/1 'Nunito Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.g-ninja-panel-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.g-ninja-panel-actions button {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font: 700 0.9rem/1 'Nunito Sans', sans-serif;
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
}
.g-ninja-panel-actions button.g-ninja-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-border);
}
.g-ninja-panel-actions button:active {
  transform: scale(0.97);
}

/* ── Intro toast (brief "Slice the fruit!" hint) ── */
.g-ninja-hint {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%);
  font: 700 1.05rem/1.3 'Nunito Sans', sans-serif;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .g-ninja-hint.is-showing {
    animation: g-ninja-hint 2.4s ease-out forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  .g-ninja-hint.is-showing {
    opacity: 1;
  }
}
@keyframes g-ninja-hint {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateY(6px); }
  12%  { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 480px) {
  .g-ninja-score { font-size: 1rem; padding: 7px 11px; }
  .g-ninja-btn { width: 34px; height: 34px; font-size: 0.95rem; }
}