/* =========================
   Theme tokens (match homepage)
========================= */
:root {
  --bg: #f5f7fa;
  --text: #0f172a;
  --muted: #374151;
  --card: #ffffff;
  --ring: #e5e7eb;

  --primary: #0b61d8;
  --primary-hover: #0a51b5;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 10px 20px rgba(0,0,0,.06), 0 3px 6px rgba(0,0,0,.05);

  --chip-bg: #f8fafc;
  --chip-text: #111827;

  --ease: cubic-bezier(.22,.61,.36,1);
}

body.dark-mode {
  --bg: #0b1220;
  --text: #e5e7eb;
  --muted: #e5e7eb;
  --card: #0f172a;
  --ring: #1f2937;

  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --shadow-md: 0 10px 24px rgba(0,0,0,.35);

  --chip-bg: #0f172a;
  --chip-text: #e5e7eb;
}

/* =========================
   Base
========================= */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  text-align: center;
}

.container { max-width: 900px; margin: 0 auto; text-align: left; }

h1, .controls, .instructions { text-align: center; }

/* =========================
   Theme toggle (same behavior as homepage)
========================= */
#theme-toggle {
  position: absolute;
  top: 16px; right: 16px; z-index: 10;
  background: none; border: 0; cursor: pointer;
  padding: 8px; border-radius: 50%;
  transition: background .2s;
  display: flex; align-items: center; justify-content: center;
}
#theme-toggle:hover { background: rgba(0,0,0,.08); }
#theme-toggle img { width: 28px; height: 28px; display:block; filter: invert(0); transition: filter .2s; }
body.dark-mode #theme-toggle img { filter: invert(1); }

/* =========================
   Controls + Buttons
========================= */
.controls {
  margin: 20px 0;
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  justify-content: flex-start;
}
#togglePseudocodeBtn { margin-left: auto; order: 999; }

.controls > button,
#dfs-modal-close,
#dfs-modal-hint,
#dfs-modal-giveup {
  padding: .55rem .9rem;
  border-radius: .75rem;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font: 500 14px/1.1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .2s, border-color .2s;
}
.controls > button:hover,
#dfs-modal-close:hover,
#dfs-modal-hint:hover,
#dfs-modal-giveup:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}
.controls > button[aria-pressed="true"] { background: var(--primary-hover); border-color: var(--primary-hover); }

/* --- Interactive buttons: hover lift + press + ripple --- */
.controls > button,
#dfs-modal-close,
#dfs-modal-hint,
#dfs-modal-giveup {
  position: relative;
  overflow: hidden;                   /* clip ripple */
  transform: translateY(0) scale(1);
  transition:
    transform .18s var(--ease, cubic-bezier(.22,.61,.36,1)),
    box-shadow .18s var(--ease, cubic-bezier(.22,.61,.36,1)),
    filter .18s var(--ease, cubic-bezier(.22,.61,.36,1)),
    background .2s, border-color .2s;
}

.controls > button:hover,
#dfs-modal-close:hover,
#dfs-modal-hint:hover,
#dfs-modal-giveup:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

.controls > button:active,
#dfs-modal-close:active,
#dfs-modal-hint:active,
#dfs-modal-giveup:active {
  transform: translateY(0) scale(.98);
  filter: brightness(.98);
}

.controls > button:disabled,
#dfs-modal-close:disabled,
#dfs-modal-hint:disabled,
#dfs-modal-giveup:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Focus ring polish */
.controls > button:focus-visible,
#dfs-modal-close:focus-visible,
#dfs-modal-hint:focus-visible,
#dfs-modal-giveup:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, #93c5fd 35%, transparent);
}

/* Ripple element (injected by JS) */
.button-ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,.45);  /* shows well on your primary blue */
  mix-blend-mode: overlay;
  animation: dfsRipple .6s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes dfsRipple {
  to { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .controls > button,
  #dfs-modal-close,
  #dfs-modal-hint,
  #dfs-modal-giveup { transition: none; }
}
/* =========================
   Instructions
========================= */
.instructions {
  margin: 10px auto;
  font: 500 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--muted);
  background: none; border: none;
}
.instructions strong { font-weight: 700; color: inherit; }

/* Shown/hidden by JS */
#example-instructions, #interactive-instructions { display: none; margin: 6px 0 8px; }

/* =========================
   Panels (match homepage cards)
========================= */
#visualization,
.quiz-panel,
.modal-content {
  border: 1px solid var(--ring);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow-md);
}

/* Graph panel */
#visualization {
  width: 900px; height: 600px;
  margin: 30px auto;
}

/* Quiz panel */
.quiz-panel {
  width: 900px; margin: 30px auto; padding: 16px 20px; text-align: left;
}
.quiz-panel h2 { margin: 0 0 12px; font-family: system-ui, sans-serif; font-weight: 700; }
.quiz-question { margin-bottom: 14px; }
.quiz-question p { margin: 0 0 6px; font-family: system-ui, sans-serif; font-weight: 600; }
.quiz-question label { display: block; margin: 4px 0; font-family: system-ui, sans-serif; cursor: pointer; }
.quiz-question.correct { outline: 2px solid #2ecc71; border-radius: 8px; }
.quiz-question.incorrect { outline: 2px dashed #e74c3c; border-radius: 8px; }

/* =========================
   Modal
========================= */
.modal {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal-content { padding: 2em; text-align: center; display: flex; flex-direction: column; gap: 1em; }
#dfs-modal-message { font-size: 1.2em; margin-bottom: .5em; }

/* =========================
   Pseudocode slide-over
========================= */
#pseudocodePanel {
  position: fixed; top: 0; right: 0; height: 100vh;
  width: min(560px, 90vw);
  background: var(--card);
  border-left: 1px solid var(--ring);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  transform: translateX(100%); transition: transform .24s ease;
  z-index: 1000; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
  visibility: hidden;
}
#pseudocodePanel.show { transform: translateX(0); visibility: visible; }

.panel-header { display: flex; align-items: center; justify-content: space-between; }

.btn, .icon-btn {
  padding: .55rem .9rem; border: 1px solid var(--ring);
  border-radius: 50%;
  background: var(--card); color: var(--text);
  font: 500 14px/1 system-ui, sans-serif; display: flex; align-items: center; justify-content: center;
}
.btn.primary { background: var(--primary); border-color: var(--primary); color:#fff; }
.btn.primary[aria-pressed="true"] { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.primary:focus { outline: 2px solid #93c5fd; outline-offset: 2px; }
.icon-btn { width: 36px; height: 36px; }

.pseudo-toggle {
  display: inline-flex;
  border: 1px solid var(--ring);
  border-radius: .75rem;
  overflow: hidden;
  margin: 6px 0 10px;
  align-items: center;
}
.pseudo-toggle .seg {
  padding: .45rem .8rem;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font: 600 13px/1 system-ui, sans-serif;

  /* theme-aware */
  background: var(--chip-bg);
  color: var(--chip-text);                /* unselected text (light) */
}

.pseudo-toggle .seg + .seg { border-left: 1px solid var(--ring); }
.pseudo-toggle .seg.selected {
  background: var(--primary);
  color: #fff;
}
.pseudo-toggle .seg:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
pre.code { background: #f9fafb; color: #111827; padding: 12px 14px; border-radius: .75rem; overflow: auto;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
body.dark-mode pre.code { background: #0a0f1a; color: #e6edf3; }
pre.pseudo { display: none; margin-top: 8px; }
pre.pseudo.show { display: block; }

/* =========================
   Progressive UI bits
========================= */
@keyframes dfsFadeIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }

/* =========================
   Coding activity blanks
========================= */
#coding-activity input.blank {
  background: #f9fafb; color: #111827; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 4px;
  font: 14px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
body.dark-mode #coding-activity input.blank { background: #111827; color: #f3f4f6; border: 1px solid #374151; }

/* =========================
   Application (Maze) panel
========================= */
#application-activity { padding: 8px 16px; margin-top: 16px; text-align: left; }
#application-activity h2 { margin: 0 0 4px; font-weight: 700; }
#application-activity p.activity-instructions { margin: 4px 0 12px; opacity: .9; }

#maze-frame {
  display: block; width: 100%;
  border: 1px solid var(--ring);
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  background: transparent;
}
body.dark-mode #maze-frame { box-shadow: 0 10px 28px rgba(0,0,0,.45); }

/* Top-down reveal (keep your existing keyframes if already added) */
@keyframes cardInDown {
  from { opacity: 0; transform: translateY(-22px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Apply only while the html has .reveal-dfs */
.reveal-dfs h1,
.reveal-dfs #example-instructions,
.reveal-dfs #interactive-instructions,
.reveal-dfs #coding-instructions {
  opacity: 0;
  animation: cardInDown .4s var(--ease, cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

/* Load ALL buttons together by animating the container once */
.reveal-dfs .controls {
  opacity: 0;
  animation: cardInDown .4s var(--ease, cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
/* Buttons themselves shouldn't animate individually */
.reveal-dfs .controls > button { animation: none; opacity: 1; }

/* Graph panel */
.reveal-dfs #visualization {
  opacity: 0;
  animation: cardInDown .4s var(--ease, cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

/* === DFS reveal animation to match Home + Maze === */
@keyframes cardInDown {
  from { opacity: 0; transform: translateY(-22px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* When <html> has .reveal-dfs, animate these in with a stagger */
.reveal-dfs h1,
.reveal-dfs #example-instructions,
.reveal-dfs #interactive-instructions,
.reveal-dfs #quiz-instructions,
.reveal-dfs #coding-instructions,
.reveal-dfs .controls,
.reveal-dfs #visualization,
.reveal-dfs #dfs-quiz,
.reveal-dfs #coding-activity,
.reveal-dfs #application-activity #maze-frame,
.reveal-dfs #application-activity .maze-stats {
  opacity: 0;
  animation: cardInDown .4s var(--ease, cubic-bezier(.22,.61,.36,1)) forwards;
  animation-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}

/* Don’t re-animate individual buttons inside the controls container */
.reveal-dfs .controls > * { animation: none !important; opacity: 1; }

/* Smooth the panel animation: promote to its own layer */
#visualization,
#dfs-quiz,
#coding-activity,
#application-activity #maze-frame {
  backface-visibility: hidden;
  transform: translateZ(0);
}

#back-home {
  position: fixed;
  top: 16px;
  left: 16px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font: 500 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .2s, transform .2s;
}
#back-home:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}