/* ── Help me deduce ──────────────────────────────────────────────────────────
   The cat's teaching overlay: a frozen clone of the board with the evidence
   lit up, and her explanation underneath. Engine: src/ui/deduce.js. */

.dd-full {
  position: fixed; inset: 0; z-index: 62;
  background: var(--bg);
  display: flex; flex-direction: column; min-height: 0;
  padding: max(14px, var(--sat)) 18px max(18px, var(--sab));
  animation: fade var(--duration-2) var(--ease) both;
  user-select: none; -webkit-user-select: none;
}

.dd-top { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; flex: none; }
.dd-top .spacer { flex: 1; }
.dd-top .icon-btn { border-color: transparent; background: none; }
.dd-top .icon-btn:hover:not(:disabled) { background: var(--surface); }
.dd-name {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--mute);
  margin-left: var(--space-2);
}

/* the frozen board — scaled to fit, never interactive. The clone rides a
   wrapper pinned to the centre (deduce.js sizes it and sets the scale), because
   a cloned stage brings its own layout rules and won't centre on its own. */
.dd-board {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  padding: var(--space-5) 0;
  pointer-events: none;
}
.dd-fit {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center center;
}

/* what the lesson is pointing at */
.dd-mark {
  outline: 2.5px solid var(--accent); outline-offset: -2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent);
  z-index: 2;
}
.dd-focus {
  outline: 3px solid var(--green, #5ec27a); outline-offset: -2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green, #5ec27a) 30%, transparent);
  animation: dd-pulse 1.5s var(--ease) infinite;
  z-index: 3;
}
.dd-bad {
  outline: 2.5px solid #e05555; outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(224, 85, 85, 0.26);
  z-index: 3;
}
@keyframes dd-pulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green, #5ec27a) 30%, transparent); }
  50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--green, #5ec27a) 6%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .dd-focus { animation: none; } }

/* her explanation */
.dd-say {
  flex: none; display: flex; align-items: flex-end; gap: var(--space-3);
  max-width: 520px; width: 100%; margin: 0 auto var(--space-5);
}
.dd-cat { flex: none; display: block; min-width: 30px; }
.dd-say .pet-menu-prompt { flex: 1; min-width: 0; font-weight: 500; }

.dd-nav {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); max-width: 520px; width: 100%; margin: 0 auto;
}
.dd-nav .pill { min-width: 108px; justify-content: center; }
.dd-dots { display: flex; gap: 7px; }
.dd-dots i { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--line-2); transition: var(--t); }
.dd-dots i.on { background: var(--accent); }