/* ==========================================================
   neur0doku-tutorial.css
   Layout for the replayable intro/tutorial screen only. Colors come
   from neur0doku-theme.css (--nd-*) exclusively — nothing here should
   hardcode a color.

   Board sizing is no longer fixed per-panel in CSS — index-tutorial.js
   picks a cell size per board (cellPxFor) since the same board engine
   now renders a 3x3, 4x4, AND 5x5 across the sequence. This stylesheet
   just needs to look right at any of those sizes, which is why
   .nd-tut-cell has no fixed dimensions of its own below.
   ========================================================== */

.neur0doku-tutorial {
  max-width: 420px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Local override, not a shared theme color — only the one glowing
     "double-tap me" cell uses this, everywhere else still pulls from
     --nd-cell-bg. */
  --nd-tut-target-bg: #a7a7a7;
}

/* ==========================================================
   CRITICAL FIX: every panel region below (.nd-tut-speaker-row,
   .nd-tut-conversation, .nd-tut-choice-row, .nd-tut-hint-row) sets
   its own `display: flex`. The `hidden` attribute normally hides an
   element via a built-in browser rule (`[hidden] { display: none }`),
   but that rule lives in the user-agent stylesheet, which loses to
   ANY same-element rule written here, regardless of selector
   specificity. Net effect without this block: setting el.hidden =
   true in JS did nothing visually — every panel's message just
   stayed on screen, stacking underneath whatever came after it.
   This is what actually makes hidden work; without it the tutorial
   is unusable no matter how correct the JS logic is.
   ========================================================== */
.nd-tut-speaker-row[hidden],
.nd-tut-conversation[hidden],
.nd-tut-choice-row[hidden],
.nd-tut-hint-row[hidden] {
  display: none !important;
}

.nd-tut-topbar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

/* ---------- speech / narration card ---------- */
.nd-tut-speaker-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  width: 100%;
}
.nd-tut-speaker-avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--nd-border);
  background: var(--nd-surface-soft);
}
.nd-tut-speaker-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Beta's two solo title cards ("Hi, I'm Beta!" / "Welcome to
   neur0doku!") use the full-body art instead of the small head
   avatar, so the frame needs to be taller than the usual 1:1 square
   or it just zooms into her torso. Toggled via JS in say(). */
.nd-tut-speaker-avatar.is-fullbody {
  width: 4.5rem;
  height: 6rem;
}
.nd-tut-speaker-avatar.is-fullbody img { object-fit: contain; }

.nd-tut-speech {
  flex: 1;
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 3px 8px var(--nd-shadow);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--nd-text);
  min-height: 1.4em;
}
.nd-tut-speaker-name {
  display: block;
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  color: var(--nd-accent);
  margin-bottom: 0.15rem;
}

/* ---------- multi-line conversation transcript ---------- */
/* Used instead of .nd-tut-speaker-row whenever more than one line
   needs to be visible at once — every line the player needs stays
   on screen simultaneously, no auto-advancing timers. Each line
   reuses .nd-tut-speaker-row's own look via .nd-tut-conversation-line
   so it doesn't need its own separate rule set. */
.nd-tut-conversation {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.nd-tut-conversation-line {
  margin-bottom: 0;
}

/* ---------- stage: holds either the 4x4 real board or the small
   3x3 aside board, one at a time ---------- */
.nd-tut-stage {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1.25rem;
  min-height: 180px;
  align-items: center;
}

.nd-tut-grid {
  display: grid;
  gap: 4px;
  width: fit-content;
  background: var(--nd-surface);
  padding: 8px;
  border-radius: 1rem;
  box-shadow: 0 6px 18px var(--nd-shadow);
}

.nd-tut-cell {
  border-radius: 8px;
  background: var(--nd-cell-bg);
  border: 1px solid var(--nd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  /* Cells go from blank -> colored the instant a target is found
     (see renderBoard in index-tutorial.html) — this is what makes
     that feel like a reveal rather than a hard cut. */
  transition: background-color 0.35s ease;
}
.nd-tut-cell.is-hidden { visibility: hidden; }
.nd-tut-cell.is-locked { opacity: 0.35; }
.nd-tut-cell.is-interactive { cursor: pointer; }
.nd-tut-cell.is-interactive:hover { transform: translateY(-1px); }

/* The one cell the player should actually double-tap — a pulsing
   ring rather than just "colored like the others," so there's no
   ambiguity about which of several same-colored cells is the target. */
@keyframes nd-tut-target-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nd-accent) 55%, transparent 45%); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--nd-accent) 0%, transparent 100%); }
}
.nd-tut-cell.is-target {
  background: var(--nd-tut-target-bg);
  outline: 3px solid var(--nd-accent);
  outline-offset: 2px;
  animation: nd-tut-target-pulse 1.4s ease-in-out infinite;
}

.nd-tut-target-hint {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nd-accent);
  margin: -0.75rem 0 1rem;
}

/* Gentle "nope" bounce for a blocked attempt — no red X, no life
   lost, this isn't a scored mistake, it's a lesson. */
@keyframes nd-tut-bounce {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.nd-tut-cell.is-blocked-flash { animation: nd-tut-bounce 0.3s ease; }

.nd-tut-face-img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  pointer-events: none;
}

/* Small 3x3 aside board reads as a "thought bubble," not the real
   game — dashed border + soft surface distinguishes it at a glance. */
.nd-tut-aside-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.nd-tut-aside-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nd-text-soft);
  text-align: center;
}
.nd-tut-grid.is-aside {
  background: var(--nd-surface-soft);
  border: 1px dashed var(--nd-border);
  box-shadow: none;
}

/* ---------- top-bar Next button ---------- */
/* Lives next to the back arrow now (not a separate bottom controls
   row) — smaller than before so it doesn't crowd the back button,
   per your note about freeing up vertical space for dialogue. */
.nd-tut-next-btn {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--nd-button-border);
  background: var(--nd-button-bg);
  color: var(--nd-button-ink);
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  box-shadow: 0 4px 10px var(--nd-shadow);
}
.nd-tut-next-btn:hover { background: var(--nd-button-bg-hover); }
.nd-tut-next-btn:disabled { opacity: 0.45; cursor: default; }
.nd-tut-next-btn:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

/* ---------- character choice cards (panel 3) ---------- */
.nd-tut-choice-row {
  display: flex;
  gap: 0.75rem;
  width: 100%;
  margin-bottom: 1rem;
}
.nd-tut-choice-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.6rem;
  border-radius: 1rem;
  background: var(--nd-surface);
  border: 2px solid var(--nd-border);
  cursor: pointer;
  font: inherit;
  color: var(--nd-text);
  box-shadow: 0 3px 8px var(--nd-shadow);
}
.nd-tut-choice-card:hover { border-color: var(--nd-accent); }
.nd-tut-choice-card:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }
.nd-tut-choice-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8rem;
  overflow: hidden;
  background: var(--nd-surface-soft);
}
.nd-tut-choice-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nd-tut-choice-name { font-weight: 700; font-size: 0.9rem; }

/* ---------- hint tools (undo / 4 X's / reveal face) ---------- */
.nd-tut-hint-row {
  display: flex;
  gap: 0.6rem;
  width: 100%;
  margin: -0.5rem 0 1rem;
}
.nd-tut-hint-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.4rem;
  border-radius: 0.85rem;
  background: var(--nd-surface);
  border: 1px solid var(--nd-border);
  box-shadow: 0 3px 8px var(--nd-shadow);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nd-text);
  cursor: pointer;
}
.nd-tut-hint-btn img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}
.nd-tut-hint-btn:hover:not(:disabled) { border-color: var(--nd-accent); }
.nd-tut-hint-btn:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }
/* Single-use per panel — once pressed it stays visibly spent rather
   than disappearing, so the player can see all three tools existed
   even after using them (matches "one attempt per button" design). */
.nd-tut-hint-btn:disabled {
  opacity: 0.4;
  cursor: default;
  box-shadow: none;
}

/* "Provably not a face" marker left by the 4-X's hint. Text content
   (an X glyph) is set directly on the cell in JS rather than via an
   ::after/content string, so no CSS change is needed if that ever
   moves to an icon image instead. */
.nd-tut-cell.is-marked-x {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nd-text-soft);
}

@media (prefers-reduced-motion: reduce) {
  .nd-tut-cell.is-blocked-flash { animation: none; }
  .nd-tut-cell.is-interactive:hover { transform: none; }
  .nd-tut-cell.is-target { animation: none; }
}