/* שאלות חזותיות – פדר למהדרין */
:root { --ink: #1b1410; --vellum: #fbf6ea; --b32: #7a4b22; --b36: #1f5f6b; }

.vq-card { position: relative; border-top: 6px solid var(--b32); }
.vq-card.vq-bank-36 { border-top-color: var(--b36); }

.vq-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vq-bank { font-weight: 800; color: #fff; background: var(--b32); border-radius: 999px; padding: 3px 12px; font-size: .9rem; }
.vq-bank-36 .vq-bank { background: var(--b36); }
.vq-num { font-weight: 800; color: var(--brown); font-size: 1.05rem; }
.vq-format { margin-inline-start: auto; color: var(--muted); font-size: .85rem; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }

.vq-stem { margin: 0 auto 14px; max-width: 640px; }
.vq-f-anim3 .vq-stem, .vq-f-pick .vq-stem, .vq-f-click .vq-stem { max-width: 340px; }
.vq-stem svg { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--vellum); border: 1px solid var(--line); }
.vq-q { margin: 6px 0 4px; }
.vq-sub { color: var(--muted); margin: 0 0 14px; font-size: .95rem; }

.vq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.vq-grid.vq-n2 { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: 0 auto; }
.vq-grid.vq-n4 { grid-template-columns: repeat(4, 1fr); }
.vq-opt { position: relative; background: var(--paper); border: 2px solid var(--line); border-radius: 14px; padding: 10px 10px 12px; cursor: pointer; text-align: center; font-family: var(--font-body); transition: border-color .2s, box-shadow .2s, transform .15s; }
.vq-opt:hover { border-color: var(--gold); box-shadow: var(--shadow); transform: translateY(-2px); }
.vq-opt svg { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--vellum); }
.vq-badge { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-pale); color: var(--brown); font-weight: 800; border: 1.5px solid var(--gold); z-index: 2; }
.vq-caption { display: none; margin-top: 10px; font-weight: 700; color: var(--brown); font-size: .98rem; line-height: 1.45; }
.answered .vq-caption, .vq-caps .vq-caption { display: block; }
.answered .vq-opt { cursor: default; transform: none; }
.vq-opt.is-correct { border-color: var(--ok); background: var(--ok-bg); }
.vq-opt.is-correct .vq-badge { background: var(--ok); border-color: var(--ok); color: #fff; }
.vq-opt.is-wrong { border-color: var(--bad); background: var(--bad-bg); }
.vq-opt.is-wrong .vq-badge { background: var(--bad); border-color: var(--bad); color: #fff; }

.vq-click-wrap { max-width: 720px; margin: 0 auto; }
.vq-click-svg { display: block; width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--line); background: var(--vellum); cursor: crosshair; }
.answered .vq-click-svg { cursor: default; }

.vq-expl { display: none; }
.answered .vq-expl { display: block; }
.vq-source { margin-top: 6px; color: var(--muted); font-size: .9rem; }
.vq-actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

@media (max-width: 760px) {
    .vq-grid, .vq-grid.vq-n4 { grid-template-columns: 1fr; }
    .vq-grid.vq-n2 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .vq-opt { transition: none; } }