/* ============================================================
   VOCAB DECK — shared flashcard system (loops/vocab.md)
   Core feel pack: 3D flip · deck stack · swipe physics.
   Mount point: [data-vocab-deck]
   ============================================================ */

.vd-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 900px) { .vd-wrap { grid-template-columns: 1fr; } }

/* ---------- stats side ---------- */

.vd-stats { display: flex; flex-direction: column; gap: 14px; }

.vd-stat-row { display: flex; gap: 18px; }

.vd-stat { display: flex; flex-direction: column; }
.vd-stat-num {
  font-family: 'Clash Display', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: var(--ink, #1a1612);
  line-height: 1.05;
}
.vd-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40, rgba(26,22,18,0.45));
}

.vd-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(26,22,18,0.10);
  overflow: hidden;
}
.vd-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--iris, #5b5bd6);
  transition: width 0.4s ease;
}

.vd-next, .vd-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-40, rgba(26,22,18,0.45));
  margin: 0;
}

.vd-reset {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-40, rgba(26,22,18,0.45));
  cursor: pointer;
  border-bottom: 1px dashed rgba(26,22,18,0.3);
}
.vd-reset:hover { color: #b3261e; border-bottom-color: #b3261e; }

/* ---------- full word list ---------- */

.vd-all-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid rgba(26,22,18,0.82);
  border-radius: 13px;
  background: #fff;
  color: var(--ink, #1a1612);
  font: 600 13px 'Satoshi', sans-serif;
  text-align: left;
  cursor: pointer;
  box-shadow: 3px 3px 0 rgba(26,22,18,0.82);
  transition: transform 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.vd-all-toggle:hover {
  color: var(--iris, #5b5bd6);
  border-color: var(--iris, #5b5bd6);
  box-shadow: 3px 3px 0 rgba(91,91,214,0.35);
  transform: translateY(-1px);
}
.vd-all-toggle:focus-visible {
  outline: 3px solid var(--amber, #d97b2b);
  outline-offset: 3px;
}
.vd-all-arrow {
  font-family: 'JetBrains Mono', monospace;
  transition: transform 0.2s;
}
.vd-all-toggle[aria-expanded="true"] .vd-all-arrow { transform: rotate(180deg); }

.vd-word-list {
  grid-column: 1 / -1;
  padding: clamp(22px, 4vw, 34px);
  border: 2px solid rgba(26,22,18,0.82);
  border-radius: 22px;
  background: #fffdf6;
  box-shadow: 6px 6px 0 rgba(26,22,18,0.82);
}
.vd-word-list[hidden] { display: none; }

.vd-word-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(26,22,18,0.12);
}
.vd-word-list-head h3 {
  margin: 0;
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--ink, #1a1612);
}
.vd-word-list-head p {
  margin: 0;
  color: var(--ink-40, rgba(26,22,18,0.45));
  font: 11px 'JetBrains Mono', monospace;
  letter-spacing: 0.06em;
}

.vd-word-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}
.vd-word-entry {
  padding: 15px 17px;
  border: 1px solid rgba(26,22,18,0.12);
  border-radius: 14px;
  background: #fff;
}
.vd-word-entry dt {
  margin: 0 0 5px;
  color: var(--iris, #5b5bd6);
  font-family: 'Clash Display', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.15;
}
.vd-word-entry dd {
  margin: 0;
  color: rgba(26,22,18,0.76);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .vd-word-list-head { align-items: flex-start; flex-direction: column; gap: 6px; }
  .vd-word-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vd-all-toggle, .vd-all-arrow { transition: none; }
}

/* ---------- the stage: deck stack + flip space ---------- */

.vd-main { display: flex; flex-direction: column; gap: 14px; }

.vd-stage {
  position: relative;
  height: 360px;
  perspective: 1400px;
}
@media (max-width: 640px) { .vd-stage { height: 330px; } }

.vd-ghost {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(26,22,18,0.5);
  border-radius: 22px;
  background: #fff;
}
.vd-ghost.g1 { transform: rotate(-1.6deg) translateY(7px); opacity: 0.6; }
.vd-ghost.g2 { transform: rotate(1.2deg) translateY(13px) scale(0.985); opacity: 0.3; }

.vd-card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.25,.8,.3,1.05);
  cursor: pointer;
  border-radius: 22px;
  box-shadow: 6px 6px 0 rgba(26,22,18,0.9);
}
.vd-card.is-flipped { transform: rotateY(180deg); }
.vd-card.is-dragging { transition: none; cursor: grabbing; }
.vd-card.drag-again { box-shadow: 6px 6px 0 rgba(179,38,30,0.75); }
.vd-card.drag-good { box-shadow: 6px 6px 0 rgba(30,125,52,0.75); }

.vd-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 2px solid rgba(26,22,18,0.85);
  border-radius: 22px;
  background: #fff;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}
.vd-face.vd-back {
  transform: rotateY(180deg);
  background: var(--sand, #f3eddc);
}

.vd-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-40, rgba(26,22,18,0.45));
}
.vd-kicker.is-myth { color: #b3261e; }

.vd-term {
  font-family: 'Clash Display', sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  color: var(--ink, #1a1612);
  line-height: 1.1;
}
.vd-term-myth { font-size: clamp(19px, 2.8vw, 26px); }
.vd-ch { display: inline-block; white-space: pre; }

.vd-def { font-size: 17.5px; line-height: 1.5; color: var(--ink, #1a1612); margin: 0; }

.vd-extra { font-size: 14.5px; line-height: 1.5; margin: 0; color: rgba(26,22,18,0.75); }
.vd-extra strong { color: var(--ink, #1a1612); }
.vd-watch { color: #8c4a12; }

.vd-hint {
  margin-top: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-40, rgba(26,22,18,0.4));
}

.vd-audio {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(26,22,18,0.25);
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: border-color 0.15s, background 0.15s;
}
.vd-audio:hover { border-color: var(--iris, #5b5bd6); background: rgba(91,91,214,0.08); }

/* ---------- typed mode ---------- */

.vd-typed { display: flex; gap: 10px; margin-top: 4px; }
.vd-typed input {
  flex: 1;
  font: inherit;
  font-size: 17px;
  padding: 12px 16px;
  border: 2px solid rgba(26,22,18,0.85);
  border-radius: 12px;
  background: #fff;
  outline: none;
}
.vd-typed input:focus { border-color: var(--iris, #5b5bd6); }
.vd-typed button {
  font: inherit;
  font-weight: 600;
  padding: 0 20px;
  border-radius: 12px;
  border: 2px solid var(--ink, #1a1612);
  background: var(--ink, #1a1612);
  color: var(--sand, #f3eddc);
  cursor: pointer;
}

.vd-verdict { font-weight: 600; margin: 0; min-height: 0; }
.vd-verdict.is-right { color: #1e7d34; }
.vd-verdict.is-wrong { color: #b3261e; }

/* ---------- controls ---------- */

.vd-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) { .vd-controls { grid-template-columns: repeat(2, 1fr); } }

.vd-grade {
  font: inherit;
  border: 2px solid rgba(26,22,18,0.85);
  border-radius: 14px;
  background: #fff;
  padding: 10px 6px 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink, #1a1612);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.vd-grade small {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--iris, #5b5bd6);
  min-height: 13px;
}
.vd-grade:hover:not(:disabled) { transform: translateY(-2px); }
.vd-grade:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.vd-grade:disabled { opacity: 0.35; cursor: default; }
.vd-grade.g-again:hover:not(:disabled) { border-color: #b3261e; background: rgba(179,38,30,0.06); }
.vd-grade.g-hard:hover:not(:disabled)  { border-color: #d97b2b; background: rgba(217,123,43,0.08); }
.vd-grade.g-good:hover:not(:disabled)  { border-color: #1e7d34; background: rgba(30,125,52,0.07); }
.vd-grade.g-easy:hover:not(:disabled)  { border-color: var(--iris, #5b5bd6); background: rgba(91,91,214,0.08); }
.vd-grade.g-retry:hover:not(:disabled) { border-color: #d97b2b; background: rgba(217,123,43,0.08); }
.vd-grade.g-know:hover:not(:disabled)  { border-color: #1e7d34; background: rgba(30,125,52,0.07); }
.vd-controls.vd-session-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }

.vd-mode-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.vd-mode-toggle {
  border: none;
  background: none;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--iris, #5b5bd6);
  cursor: pointer;
  border-bottom: 1px dashed rgba(91,91,214,0.5);
}
.vd-mode-toggle:hover { color: var(--amber, #d97b2b); }

/* ---------- myth card ---------- */

.vd-myth-buttons { display: flex; gap: 10px; margin-top: 6px; }
.vd-myth-btn {
  flex: 1;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  padding: 12px;
  border-radius: 14px;
  border: 2px solid rgba(26,22,18,0.85);
  background: #fff;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.vd-myth-btn:hover { transform: translateY(-2px); }
.vd-myth-btn.m-yes:hover { border-color: #b3261e; background: rgba(179,38,30,0.06); }
.vd-myth-btn.m-no:hover  { border-color: #1e7d34; background: rgba(30,125,52,0.07); }

/* ---------- mode switcher ---------- */

.vd-modes { display: flex; gap: 6px; }

.vd-mode {
  font: inherit;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px solid rgba(26,22,18,0.3);
  background: #fff;
  color: rgba(26,22,18,0.6);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vd-mode:hover { border-color: rgba(26,22,18,0.7); }
.vd-mode.is-on {
  background: var(--ink, #1a1612);
  border-color: var(--ink, #1a1612);
  color: var(--sand, #f3eddc);
}

/* ---------- match mode ---------- */

.vd-match {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 2px;
}

.vd-match-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.vd-match-cols {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  flex: 1;
  align-content: start;
}
@media (max-width: 640px) { .vd-match-cols { grid-template-columns: 1fr 1.2fr; } }

.vd-mcol { display: flex; flex-direction: column; gap: 8px; }

.vd-mterm, .vd-mdef {
  font: inherit;
  text-align: left;
  border: 2px solid rgba(26,22,18,0.55);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 10px 13px;
  transition: border-color 0.15s, background 0.15s, transform 0.12s, opacity 0.35s;
}
.vd-mterm {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink, #1a1612);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.vd-mdef { font-size: 12.5px; line-height: 1.4; color: rgba(26,22,18,0.8); }

.vd-mterm:hover, .vd-mdef:hover { border-color: rgba(26,22,18,0.9); transform: translateY(-1px); }

.vd-mterm.is-selected {
  border-color: var(--iris, #5b5bd6);
  background: rgba(91,91,214,0.10);
  transform: translateY(-1px);
  box-shadow: 3px 3px 0 rgba(91,91,214,0.35);
}

.vd-mterm.is-drag-source {
  opacity: 0.42;
  cursor: grabbing;
}

.vd-match-drag-ghost {
  position: fixed;
  z-index: 2147483000;
  margin: 0;
  pointer-events: none;
  cursor: grabbing;
  opacity: 0.96;
  transform: rotate(-1.5deg) scale(1.02);
  box-shadow: 7px 9px 22px rgba(26,22,18,0.24);
  transition: none;
}

.vd-mdef.is-drop-target {
  border-color: var(--iris, #5b5bd6);
  background: rgba(91,91,214,0.12);
  box-shadow: 3px 3px 0 rgba(91,91,214,0.28);
  transform: translateY(-1px) scale(1.01);
}

.vd-mterm.is-matched, .vd-mdef.is-matched {
  border-color: #1e7d34;
  background: rgba(30,125,52,0.10);
  color: #1e7d34;
}

.vd-mterm.is-gone, .vd-mdef.is-gone {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
}

.vd-mterm.is-wrong, .vd-mdef.is-wrong {
  border-color: #b3261e;
  background: rgba(179,38,30,0.07);
  animation: vd-shake 0.32s;
}

@keyframes vd-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- empty state ---------- */

.vd-empty {
  border: 2px dashed rgba(26,22,18,0.3);
  border-radius: 22px;
  padding: 40px 32px;
  text-align: center;
  color: rgba(26,22,18,0.65);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vd-empty .vd-empty-big {
  font-family: 'Clash Display', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--ink, #1a1612);
  margin: 0 0 8px;
}