/* ============================================================
   study.css — styling for the Study feature (deck list + the three
   full-screen overlays: editor, flashcards, exam). Uses the app's
   design tokens so it matches light/dark themes automatically.
   ============================================================ */

/* ---------- deck list ---------- */
.study-head {
  align-items: flex-start;
}
.study-head > .btn { align-self: center; }
/* Explore + New deck button group in the study header. */
.study-head-actions { display: flex; gap: 8px; align-self: center; }

/* Explore screen: a banner making clear these are public, not the user's own. */
.explore-banner {
  background: color-mix(in srgb, var(--sidebar-bg) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sidebar-bg) 30%, var(--border));
  border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 16px;
  font-size: 0.9rem; color: var(--text);
}
.explore-banner strong { color: var(--sidebar-bg); }
/* "Public" badge on each explore row. */
.explore-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; background: var(--sidebar-bg);
  border-radius: 999px; padding: 2px 8px; margin-left: 2px;
}
.explore-cat {
  color: var(--muted); background: rgba(120, 130, 150, 0.14);
}
.explore-row { cursor: pointer; }

/* Search + category filter, on one row at the left. */
.study-controls { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
/* The filter is a <select> wrapped in a relative container; the chevron is a
   real pseudo-element (pure CSS, no data-URI or background that a shorthand
   could wipe), so it always shows. Its right offset sets the gap from the edge. */
.study-cat-wrap { position: relative; display: inline-flex; flex: 0 1 auto; }
.study-cat-filter {
  width: 100%; min-width: 200px;
  height: 38px;
  box-sizing: border-box;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 0 40px 0 14px;
  background-image: none;
}
/* Down chevron: two short strokes drawn with a rotated square's borders. */
.study-cat-chevron {
  position: absolute; right: 16px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -6px;                 /* nudge up so the rotated tip centers */
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;             /* clicks pass through to the select */
}

/* Search: a small icon that expands on hover (or focus) into an input. */
.study-search-wrap {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); overflow: hidden;
  transition: width 0.22s ease, background 0.15s ease;
  width: 38px; height: 38px;
  flex: 0 0 auto;
}
.study-search-btn {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--muted); cursor: pointer;
}
.study-search-btn:hover { color: var(--text); }
.study-search {
  flex: 1; min-width: 0; width: 0;
  border: none; background: none; color: var(--text);
  font: inherit; padding: 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
.study-search:focus { outline: none; }
/* Expanded: on hover, on focus-within, or when forced open (has text). */
.study-search-wrap:hover,
.study-search-wrap:focus-within,
.study-search-wrap.open { width: 230px; }
.study-search-wrap:hover .study-search,
.study-search-wrap:focus-within .study-search,
.study-search-wrap.open .study-search {
  opacity: 1; pointer-events: auto; padding: 0 12px 0 2px;
}

.study-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 100%; }
#view-study { min-width: 0; max-width: 100%; overflow-x: hidden; }

.study-deck-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.study-deck-row:hover {
  border-color: var(--sidebar-bg);
  box-shadow: 0 4px 16px -8px rgba(20, 27, 40, 0.25);
}
.study-deck-main { flex: 1; min-width: 0; }
/* Title + category tag share a line; the tag wraps under only when the title
   itself is long enough to fill the row. Baited to the title's baseline. */
.study-deck-name {
  font-weight: 600; font-size: 1.02rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px;
  min-width: 0;
}
.study-deck-cat {
  display: inline-block; vertical-align: middle;
  font-size: 0.7rem; font-weight: 500;
  color: var(--sidebar-bg); background: rgba(91, 110, 154, 0.12);
  border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; flex: 0 0 auto;
}
.study-deck-meta {
  color: var(--muted); font-size: 0.85rem; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* On wide screens the actions overlay the right side of the row on hover,
   positioned absolutely so they DON'T reserve horizontal space. That keeps the
   deck row's min-width small (the page can shrink far) and lets the title +
   category tag use the full width, so the tag stays on the title's line. */
.study-deck-actions {
  display: flex; gap: 6px;
  opacity: 0; transition: opacity 0.15s ease;
  position: absolute; right: 14px; top: 8px; bottom: 8px;
  align-items: stretch;
  background: linear-gradient(to right, transparent, var(--surface) 18%);
  padding-left: 40px;
}
.study-deck-row:hover .study-deck-actions { opacity: 1; }
/* Bigger, taller action buttons that fill most of the row height so they read
   as substantial rather than tiny chips. */
.study-deck-actions .btn {
  white-space: nowrap;
  display: flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 0.9rem;
  margin-top: 0;
}

.study-empty { color: var(--muted); padding: 24px 0; }

/* ---------- full-screen overlays (editor / flashcards / exam) ---------- */
.study-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.study-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.study-bar { position: relative; }
.study-bar h2 {
  margin: 0; font-size: 1.1rem;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  text-align: center; white-space: nowrap;
  max-width: 50%; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.study-bar-spacer, .study-bar-right { min-width: 96px; display: flex; justify-content: flex-end; }
.study-exit {
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 0.9rem;
  cursor: pointer; white-space: nowrap;
}
.study-exit:hover { border-color: var(--sidebar-bg); }

.study-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px 40px;
}
.study-editor-body { width: 88%; max-width: 2200px; margin: 0 auto; }
.exam-stage, .flash-stage { max-width: 720px; margin: 0 auto; }

/* Settings popover (shared by flashcards + exam) */
.study-bar-right { position: relative; display: flex; align-items: center; gap: 10px; }
/* Header buttons (mode switch + settings) share a clean pill look and a fixed
   size so swapping between Flashcards and Exam never resizes them. */
.study-bar-right .btn {
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.study-bar-right .btn:hover { border-color: var(--muted); background: var(--bg); }
/* The mode-switch button is wide enough for the longer label ("Flashcard mode"),
   so both modes render at the same width. */
.study-bar-mode { min-width: 132px; text-align: center; }
.study-settings-pop {
  position: absolute;
  top: 44px; right: 0;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.3);
  padding: 12px;
  z-index: 5;
  text-align: left;
}
.study-settings-title {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 6px 0 6px;
}
.study-settings-title:first-child { margin-top: 0; }
.study-radio { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.study-count-input {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 6px; font: inherit; margin-bottom: 8px; background: var(--bg); color: var(--text);
}

/* ---------- editor ---------- */
.field-optional { color: var(--muted); font-weight: 400; }
/* Category + subcategory dropdowns sit side by side in the editor. */
.edit-cat-row { display: flex; gap: 14px; flex-wrap: wrap; }
.edit-cat-field { flex: 1; min-width: 180px; margin-bottom: 14px; }
.edit-cat-field .inline-select { width: 100%; }
.edit-cards-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 20px 0 10px;
}
.edit-io { display: flex; gap: 6px; }
.edit-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.edit-card-row { display: flex; align-items: center; gap: 8px; }
.edit-card-num { width: 20px; text-align: right; color: var(--muted); font-size: 0.8rem; flex: 0 0 auto; }
.edit-card-term, .edit-card-def {
  flex: 1; min-width: 0; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: var(--surface); color: var(--text);
}
/* A term/definition that duplicates another one is flagged red. */
.edit-card-term.dup, .edit-card-def.dup {
  border-color: #ef5350;
  background: rgba(239, 83, 80, 0.08);
}
.edit-card-del {
  flex: 0 0 auto; width: 30px; height: 30px; border: none; background: none;
  color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 6px;
}
.edit-card-del:hover { color: #b91c1c; background: var(--bg); }
.study-editor-foot {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.study-editor-foot-spacer { flex: 1; }
.edit-delete { color: #c62828; border-color: #ef9a9a; }
.edit-delete:hover { background: rgba(239, 83, 80, 0.08); border-color: #ef5350; }

/* ---------- flashcards ---------- */
.flash-progress {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 20px; width: 100%;
}
.flash-progress-track {
  width: 100%; max-width: 620px;
  height: 6px; border-radius: 999px; background: var(--border); overflow: hidden;
}
.flash-progress-track span {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: var(--sidebar-bg); transition: width 0.3s ease;
}
/* The mastery count sits centered just below the bar. */
.flash-progress-label {
  color: var(--muted); font-size: 0.8rem; white-space: nowrap;
}

.flash-body { display: flex; }
.flash-stage {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 24px; min-height: 60vh;
}
.flash-card {
  width: 100%; max-width: 620px; height: 380px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 16px 44px -22px rgba(20, 27, 40, 0.5);
  display: flex; align-items: stretch; justify-content: center;
  padding: 32px 36px; cursor: pointer; user-select: none;
  overflow: auto;   /* very long content scrolls instead of resizing the card */
  transition: transform 0.1s ease;
}
.flash-card:active { transform: scale(0.995); }
/* Column layout: term (+ its label) sit at the top; the divider follows; then
   the definition or the reveal hint fills the space beneath. */
.flash-face { width: 100%; text-align: center; display: flex; flex-direction: column; }
/* The term area is a fixed slice of the card (~a third), with the term centered
   in it, so the divider always lands at the same spot regardless of term
   length or whether the card is revealed. */
.flash-front {
  height: 120px;
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.flash-side-label {
  display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px;
}
.flash-text { font-size: 1.7rem; line-height: 1.3; overflow-wrap: anywhere; }
.flash-back { color: var(--text); }   /* same size as the term now */
/* The revealed back content fills the space below the divider and centers in
   it, so the definition sits midway between the line and the card bottom
   (matching where the "Click to reveal" hint appears). */
.flash-back-wrap {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.flash-back-wrap .flash-hint { margin-top: 14px; }
.flash-divider { height: 1px; background: var(--border); margin: 20px 0; }
.flash-hint { margin-top: 18px; color: var(--muted); font-size: 0.85rem; }
/* When it stands in for the definition (card not yet revealed), the reveal hint
   fills the space below the divider and centers within it, a bit bigger. */
.flash-hint--reveal {
  margin-top: 0;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--muted);
}

.flash-rate { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Controls row sits below the card. The rating buttons are centered on the
   card; the back arrow is pinned to the left without pushing them off-centre.
   The rating group keeps its space even when hidden, so the card never shifts. */
.flash-controls {
  position: relative;
  width: 100%;
  max-width: 620px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
}
.flash-rate--hidden { visibility: hidden; }
.flash-back-arrow {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
/* Skip arrow: mirror of the back arrow, pinned to the right of the controls. */
.flash-skip-arrow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.flash-skip-arrow:hover { border-color: var(--muted); }
.flash-back-arrow:hover:not(:disabled) { border-color: var(--sidebar-bg); }
.flash-back-arrow:disabled { opacity: 0.35; cursor: default; }
.flash-rate-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 10px 22px; font: inherit; font-weight: 500;
  cursor: pointer; transition: transform 0.1s ease, border-color 0.15s ease;
}
.flash-rate-btn:hover { transform: translateY(-1px); }
.flash-rate-btn.hard    { border-color: #ffcc80; color: #e65100; }
.flash-rate-btn.neutral { border-color: var(--border); color: var(--muted); }
.flash-rate-btn.easy    { border-color: #90caf9; color: #1565c0; }

.flash-done { text-align: center; }
.flash-done h2 { margin: 0 0 8px; }
.flash-done p { color: var(--muted); margin: 0 0 20px; }

/* ---------- exam ---------- */
.exam-body { display: block; }
.exam-list { display: flex; flex-direction: column; gap: 14px; }
.exam-q {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
}
.exam-q-num { font-size: 0.75rem; color: var(--muted); margin-bottom: 6px; }
.exam-q-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 4px;
}
.exam-q-prompt { font-size: 1.1rem; margin-bottom: 12px; overflow-wrap: anywhere; }
.exam-q-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: var(--bg); color: var(--text);
}

.exam-score { text-align: center; margin-bottom: 20px; }
.exam-score h2 { margin: 0; }

/* Review state: green border for correct, red for wrong. */
.exam-reviewed.is-correct { border-color: #66bb6a; box-shadow: inset 3px 0 0 #66bb6a; }
.exam-reviewed.is-wrong   { border-color: #ef5350; box-shadow: inset 3px 0 0 #ef5350; }
.exam-answer-line { font-size: 0.92rem; margin-top: 6px; }
.exam-answer-label { color: var(--muted); }
.exam-reviewed.is-wrong .exam-your-answer { color: #c62828; text-decoration: line-through; }
.exam-reviewed.is-correct .exam-your-answer { color: #2e7d32; }
.exam-correct-answer { color: #2e7d32; font-weight: 600; }

.study-foot {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: 14px 20px; display: flex; gap: 10px; justify-content: center;
}

/* ---------- mobile ---------- */
@media (max-width: 720px) {
  /* Deck actions can't rely on hover on touch, so always show them, back in
     normal flow below the deck info (undo the desktop absolute overlay). */
  .study-deck-actions {
    opacity: 1;
    position: static;
    background: none;
    padding-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .study-deck-row { flex-direction: column; align-items: stretch; }

  /* Mobile: center the deck list and its rows in the available width. */
  .study-list { align-items: center; }
  .study-deck-row { width: 100%; max-width: 520px; }
  .study-controls { justify-content: center; }
  .flash-text { font-size: 1.45rem; }
  .flash-card { height: 340px; padding: 28px 24px; }
  .flash-front { height: 100px; }
  .study-bar h2 { font-size: 1rem; }
  .study-bar-spacer, .study-bar-right { min-width: 60px; }
}

/* ---------- world map (study mode) ---------- */
.worldmap-wrap {
  width: 100%; height: 100%;
  background: var(--bg);
  border-radius: 12px; overflow: hidden;
  touch-action: none;   /* we handle pan/pinch ourselves */
}
.worldmap-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.worldmap-svg:active { cursor: grabbing; }
.worldmap-ocean { fill: var(--surface); }
.worldmap-country {
  fill: #cfd6e4; stroke: var(--bg); stroke-width: 0.5;
  vector-effect: non-scaling-stroke;   /* borders stay thin when zoomed */
  transition: fill 0.12s ease;
}
.worldmap-country:hover { fill: #b6c0d6; }
.worldmap-selected, .worldmap-country.worldmap-selected {
  fill: var(--sidebar-bg);
}
.worldmap-country.worldmap-right,
.worldmap-country.worldmap-right:hover { fill: #16a34a; }
.worldmap-country.worldmap-wrong,
.worldmap-country.worldmap-wrong:hover { fill: #dc2626; }
[data-theme="dark"] .worldmap-country { fill: #3a465e; }
[data-theme="dark"] .worldmap-country:hover { fill: #48566f; }
/* Right/wrong must beat the dark-theme base fill (same specificity, so these
   come AFTER to win the cascade). */
[data-theme="dark"] .worldmap-country.worldmap-right,
[data-theme="dark"] .worldmap-country.worldmap-right:hover { fill: #16a34a; }
[data-theme="dark"] .worldmap-country.worldmap-wrong,
[data-theme="dark"] .worldmap-country.worldmap-wrong:hover { fill: #dc2626; }
[data-theme="dark"] .worldmap-country.worldmap-selected { fill: var(--sidebar-bg); }

/* ---------- world map: editor ---------- */
.wm-editor-body { display: flex; flex-direction: column; gap: 12px; }
.wm-hint { color: var(--muted); font-size: 0.9rem; margin: 0; }
.wm-editor-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: stretch; min-height: 460px; }
.wm-editor-map { min-height: 460px; border: 1px solid var(--border); }
.wm-picked { border: 1px solid var(--border); border-radius: 12px; padding: 12px; overflow-y: auto; max-height: 520px; }
.wm-picked-head { font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.wm-empty { color: var(--muted); font-size: 0.9rem; }
.wm-pick-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wm-pick-country { flex: 0 0 40%; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm-pick-def { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 0.85rem; }
.wm-pick-del { flex: 0 0 auto; width: 26px; height: 26px; border: none; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; border-radius: 6px; }
.wm-pick-del:hover { background: rgba(200,60,60,0.12); color: #d33; }
.wm-tag { color: var(--sidebar-bg); background: rgba(91,110,154,0.14); }

/* ---------- world map: quiz ---------- */
.wm-quiz-progress { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 20px; }
.wm-quiz-body { display: flex; flex-direction: column; gap: 12px; height: calc(100% - 120px); }
.wm-prompt { text-align: center; font-size: 1.3rem; font-weight: 600; min-height: 1.4em; }
.wm-quiz-map { flex: 1; min-height: 320px; border: 1px solid var(--border); }
.wm-quiz-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 48px; }
.wm-answer { text-align: center; font-size: 1.15rem; }
.wm-country-note { color: var(--muted); font-size: 0.9rem; }
.wm-selfgrade { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.wm-hint-line { color: var(--muted); }
.wm-result { text-align: center; font-weight: 600; }
.wm-right { color: #16a34a; }
.wm-wrong { color: #dc2626; }
.wm-done { text-align: center; }
.wm-done h3 { margin: 0 0 6px; }

@media (max-width: 720px) {
  .wm-editor-split { grid-template-columns: 1fr; }
  .wm-editor-map, .wm-quiz-map { min-height: 300px; }
}

/* ---------- image-dot deck ---------- */
.img-editor-body { display: flex; flex-direction: column; gap: 12px; }
.img-upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.img-upload-hint, .img-hint { color: var(--muted); font-size: 0.9rem; margin: 0; }
.img-editor-split { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.img-pick-num, .wm-pick-row .img-pick-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  background: var(--sidebar-bg); color: #fff; font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center;
}
/* The stage holds the image and an absolutely-positioned dot layer on top. */
.img-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; cursor: crosshair; }
.img-stage img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.img-dots { position: absolute; inset: 0; pointer-events: none; }
.img-dot {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--sidebar-bg); color: #fff;
  font-size: 0.72rem; font-weight: 600; line-height: 22px; text-align: center;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,0.4);
}
.img-dot--quiz { background: var(--sidebar-bg); width: 20px; height: 20px; }
.img-dot--guess { width: 16px; height: 16px; }
.img-guess-right { background: #16a34a; }
.img-guess-wrong { background: #dc2626; }

.img-quiz-body { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.img-quiz-stage { max-width: 100%; cursor: crosshair; }
.img-quiz-stage img { max-height: 60vh; width: auto; }

@media (max-width: 720px) {
  .img-editor-split { grid-template-columns: 1fr; }
}

/* world map / image quiz: typed-answer form */
.wm-type-form { display: flex; gap: 8px; justify-content: center; width: 100%; max-width: 420px; }
.wm-type-input {
  flex: 1; min-width: 0; padding: 10px 14px; font: inherit; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.wm-type-input:focus { outline: none; border-color: var(--sidebar-bg); }