/* 그림 위 글 상자, 고르기 = 스티커 떼기.
   css/ 의 파일은 index.html 에서 번호 순서대로 겹쳐 적용된다(뒤 파일이 앞 파일을 덮는다). 순서를 바꾸지 말 것. */
/* ───── 그림 위 글 상자: 그림은 자르지 않고 왼쪽 아래에 글만 띄운다 (붙일 자리와 겹쳐도 그대로, 누르면 아래로 통과) ───── */
.story-caption {
  position: absolute;
  z-index: 5;
  --gap: clamp(10px,1.6vw,20px);
  max-width: 66%;
  padding: clamp(6px, 0.8vw, 10px) clamp(10px, 1.2vw, 15px);
  border-radius: 14px;
  background: #fffaf1b3;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 18px #2b3f2f1f;
  text-shadow: 0 0 6px #fffaf1;
  font:
    clamp(18px, 2vw, 25px)/1.55 Jua,
    sans-serif;
  color: #2f4a3c;
  white-space: pre-line;
  word-break: keep-all;
  pointer-events: none;
}
.story-caption:empty {
  display: none;
}
.story-caption:not([data-at]) {
  visibility: hidden;
}
.story-caption[data-at='bl'] {
  left: var(--gap);
  bottom: var(--gap);
}
.story-caption[data-at='br'] {
  right: var(--gap);
  bottom: var(--gap);
}
.story-caption[data-at='tl'] {
  left: var(--gap);
  top: var(--gap);
}
.story-caption[data-at='tr'] {
  right: var(--gap);
  top: var(--gap);
}
.board:has(.story-caption[data-at='tr']) .scene-status {
  right: auto;
  left: 12px;
}
@media (min-width: 701px) {
  #reader .story-copy #story-text,
  #reader .result-box {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 700px) {
  .story-caption {
    display: none;
  }
}

/* ───── 고르기 = 스티커 떼기: 두 장 모두 떼어 붙일 수 있다 ───── */
#choices .choice {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#choices .choice:disabled {
  cursor: default;
}
.choice-art {
  display: block;
  position: relative;
}
.choice-art.paper-lifted > * {
  visibility: hidden;
}
#reader .choice.hinted {
  animation: hint-glow 1.2s ease-in-out infinite;
}
@keyframes hint-glow {
  50% {
    box-shadow:
      0 0 0 6px #d9edb8,
      0 0 18px #9fcf7a;
  }
}
@media (prefers-reduced-motion: reduce) {
  #reader .choice.hinted {
    animation: none;
  }
}