:root{font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", sans-serif}
body{margin:0;background:#f3f6fb;color:#0b1320}
.wrap{max-width:820px;margin:2rem auto;padding:1rem}
h1{margin:0 0 .5rem}
.desc{color:#445; margin:0 0 1rem}
/* single 用の中央寄せ */
.board.single { display:flex; justify-content:center; gap:16px; }
.image-wrap{position:relative;width:100%;max-width:680px;}
.image-wrap img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 18px rgba(2,6,23,.08)}
.marker-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto}
.status{margin-top:12px;padding:8px 10px;background:#fff;border-radius:8px;display:inline-block}
.popup{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;padding:10px 16px;background:#0ea5e9;color:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;transition:opacity .25s}
.popup.show{opacity:1}
.hidden{display:none}

/* マーカー（相対%ベース） */
.correct-circle {
  position: absolute;
  width: var(--r);
  height: var(--r);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(34,197,94,0.18);
  border: 3px solid rgba(34,197,94,0.95);
  box-shadow: 0 6px 14px rgba(16,24,40,0.12);
  pointer-events: none;
}

/* 正解チェック表示（短時間） */
.correct-mark {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(34,197,94,0.95);
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700; font-size:14px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(16,24,40,0.2);
}

/* 間違いマーク */
.temp-mark {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239,68,68,0.95);
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:700; font-size:12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(16,24,40,0.2);
}