/* === Gezi Quiz v1.3.3 (Mobile-friendly, theme-aware) === */
:root{
  --gq-bg: var(--mow-bbc, #ffffff);
  --gq-fg: var(--mow-hc, #111827);
  --gq-border: var(--mow-border-color, #e5e7eb);
  --gq-muted: var(--mow-bc, #6b7280);
  --gq-accent: var(--mow-mc1, #007aff);
  --gq-contrast: var(--mow-contrast-text, #ffffff);
  --gq-radius: var(--radius, 12px);
  --gq-space: var(--space, 16px);
  --gq-space-lg: var(--space-lg, 28px);
  --gq-head-ff: var(--hff, 'Heebo', system-ui, sans-serif);
  --gq-body-ff: var(--bff, 'Work Sans', system-ui, sans-serif);
}
.gq-wrap{
  background: var(--gq-bg);
  color: var(--gq-fg);
  border: 1px solid var(--gq-border);
  border-radius: var(--gq-radius);
  box-shadow: var(--mow-box-shadow, 0 1px 3px rgba(0,0,0,.15));
  max-width: 820px; margin: 1rem auto; padding: var(--gq-space-lg);
  font-family: var(--gq-body-ff);
  scroll-margin-top: var(--wp-admin--admin-bar--height, 32px);
}
.gq-head{position:relative; display:flex; flex-direction:column; gap:.25rem; margin-bottom:.75rem}
.gq-title{font-family:var(--gq-head-ff); font-weight:800; font-size: clamp(22px, 2.8vw, 28px)}
.gq-sub{color:var(--gq-muted); font-size: clamp(14px, 2.1vw, 16px)}
.gq-intro{text-align:center; color: color-mix(in srgb, var(--gq-fg) 92%, transparent)}
.gq-btn{
  cursor:pointer; padding:.7rem 1.1rem; border-radius: var(--gq-radius);
  background: var(--gq-accent); color: var(--gq-contrast);
  border:1px solid color-mix(in srgb, var(--gq-accent) 70%, #000 30%);
  font-weight:700; transition: background .2s ease, transform .08s ease;
  font-size: clamp(16px, 2.6vw, 18px);
}
.gq-btn:hover{ background: color-mix(in srgb, var(--gq-accent) 88%, #000 12%); transform: translateY(-1px); }

.hidden{display:none}
.gq-quiz .gq-progress{ color:var(--gq-muted); font-size: .95rem; margin-bottom:.5rem }
.gq-q{ font-size: clamp(18px, 3.2vw, 22px); font-weight: 800; margin:.25rem 0 .6rem; line-height:1.35 }

/* Choices (mobile-first) */
.gq-choices{ display:grid; grid-template-columns:1fr; gap: var(--gq-space) }
@media (min-width: 840px){ .gq-choices{ grid-template-columns:1fr 1fr } }
.gq-choices .gq-opt{
  text-align:left; border:1px solid var(--gq-border);
  border-radius: calc(var(--gq-radius) - 2px);
  background: color-mix(in srgb, var(--gq-fg) 6%, transparent);
  color: var(--gq-fg);
  padding: 16px 16px; min-height: 52px;
  font-size: clamp(17px, 3vw, 20px);
  line-height: 1.5; word-break: normal; overflow-wrap: anywhere;
  cursor:pointer; transition: background .18s ease, transform .06s ease;
}
.gq-choices .gq-opt:hover{ background: color-mix(in srgb, var(--gq-fg) 12%, transparent); transform: translateY(-1px) }
.gq-choices .gq-opt:focus-visible{ outline:none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--gq-accent, #4f46e5) 55%, transparent) }

/* Correct / Wrong (explicit colors for clarity) */
.gq-choices .gq-opt.correct{ background: color-mix(in srgb, #16a34a 18%, transparent); border-color:#16a34a; color:#0b1f0b; box-shadow: inset 0 0 0 2px rgba(22,163,74,.22) }
.gq-choices .gq-opt.wrong{ background: color-mix(in srgb, #e11d48 16%, transparent); border-color:#e11d48; color:#3d0a14; box-shadow: inset 0 0 0 2px rgba(225,29,72,.2) }

/* Feedback + explanation */
.gq-feedback{ min-height:1.6rem; margin:.35rem 0 .6rem; font-weight:700 }
.gq-feedback.ok{ color:#16a34a }
.gq-feedback.err{ color:#e11d48 }
.gq-explain{ margin-top:.5rem; padding:.6rem .75rem; border:1px dashed var(--gq-border); border-radius: calc(var(--gq-radius) - 2px); background: color-mix(in srgb, var(--gq-fg) 4%, transparent); color: color-mix(in srgb, var(--gq-fg) 90%, transparent); font-size: clamp(14px, 2.4vw, 16px) }

/* Sound button (top-right) */
.gq-sound{
  position:absolute; top:8px; right:8px; width:36px; height:36px; border-radius:10px;
  display:inline-grid; place-items:center; color: var(--gq-fg);
  background: color-mix(in srgb, var(--gq-fg) 6%, transparent); border:1px solid var(--gq-border);
  transition: background .15s ease, transform .06s ease;
}
.gq-sound:hover{ background: color-mix(in srgb, var(--gq-fg) 12%, transparent); transform: translateY(-1px) }
.gq-sound svg{ width:22px; height:22px; display:block }

/* Dark mode */
[data-site-skin="dark"] .gq-wrap{ background: var(--mow-ebc, #1d1d1d); color: var(--mow-hc, #ddd); border-color: var(--mow-border-color, #333) }
[data-site-skin="dark"] .gq-sub{ color:#999 }
[data-site-skin="dark"] .gq-choices .gq-opt{ background:#1f1f1f; border-color:#3a3a3a; color:#e6e6e6 }
[data-site-skin="dark"] .gq-choices .gq-opt:hover{ background:#2a2a2a }
[data-site-skin="dark"] .gq-choices .gq-opt.correct{ background: color-mix(in srgb, #16a34a 28%, transparent); border-color:#16a34a; color:#ecffec }
[data-site-skin="dark"] .gq-choices .gq-opt.wrong{ background: color-mix(in srgb, #e11d48 26%, transparent); border-color:#e11d48; color:#fff2f2 }
[data-site-skin="dark"] .gq-explain{ background:#1f1f1f; border-color:#3a3a3a; color:#ddd }
[data-site-skin="dark"] .gq-sound{ color:#eee; background:#252525; border-color:#3a3a3a }
[data-site-skin="dark"] .gq-sound:hover{ background:#333 }