/* 거품 놀이: 떠다니는 거품, 터지는 효과, 히어로의 세 방울, 톡톡 놀이.
   글자는 거품 사진 위에 직접 올리지 않는다. 놀이 거품의 글은 불투명한 흰 원 위에 놓는다. */

/* ---------- 터지는 효과: 눌린 자리에 잠깐 놓인다 ---------- */
.fx { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; }
.fx img { position: absolute; width: var(--s); height: var(--s); max-width: none; left: calc(var(--s) / -2); top: calc(var(--s) / -2); }
.fx b {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  padding: 2px 14px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 20px; font-weight: 900; line-height: 1.4; letter-spacing: -.03em; white-space: nowrap;
}

/* ---------- 화면 가장자리를 떠다니는 거품 ---------- */
.sky { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.fl {
  position: absolute; left: 0; top: 0; width: var(--d); height: var(--d); padding: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; will-change: transform; border-radius: 50%; touch-action: manipulation;
}
.fl img { display: block; width: 100%; height: 100%; }
.fl.is-gone { visibility: hidden; }

/* ---------- 히어로: 세 방울은 떠 있고, 네 번째는 다가오다 터진다 ---------- */
.trio {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  transform: translate3d(0, calc(var(--hp, 0) * -36vh), 0) scale(calc(1 + var(--hp, 0) * 1.1));
  transform-origin: 74% 40%;
  opacity: calc(1.3 - var(--hp, 0) * 1.5);
}
.t {
  position: absolute; display: block; padding: 0; border: 0; background: none; border-radius: 50%;
  width: var(--tw); height: var(--tw); cursor: pointer; pointer-events: auto; touch-action: manipulation;
  animation: bob 6.4s ease-in-out infinite alternate;
  transition: opacity .12s, transform .2s;
}
.t img, .t4 img { display: block; width: 100%; height: 100%; }
.t.is-popped { opacity: 0; transform: scale(1.2); pointer-events: none; animation: none; }
.t.is-back { animation: t-back .6s var(--ease-pop) both; }
.t1 { --tw: clamp(150px, 16.5vw, 320px); left: 57%; top: 9%; }
.t2 { --tw: clamp(180px, 20vw, 390px); left: 71%; top: 20%; animation-duration: 7.6s; animation-delay: -2s; }
.t3 { --tw: clamp(120px, 13vw, 260px); left: 59%; top: 48%; animation-duration: 5.4s; animation-delay: -3.4s; }
.t4 { position: absolute; display: block; --tw: clamp(100px, 11vw, 220px); width: var(--tw); height: var(--tw); left: 84%; top: 6%; }
.t4-b { position: absolute; inset: 0; animation: t4-rise 7s linear infinite; }
.t4-x { position: absolute; inset: -40%; width: 180%; height: 180%; max-width: none; opacity: 0; animation: t4-burst 7s linear infinite; }
.t4-say {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0;
  padding: 2px 16px; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: 24px; font-weight: 900; line-height: 1.4; animation: t4-say 7s linear infinite;
}
@keyframes bob { from { translate: 0 -10px; } to { translate: 0 12px; } }
@keyframes t-back { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes t4-rise {
  0% { opacity: 0; transform: translate3d(0, 62vh, 0) scale(.55); }
  10% { opacity: 1; }
  62% { opacity: 1; transform: none; }
  65% { opacity: 1; transform: scale(1.14, .9); }
  66%, 100% { opacity: 0; transform: scale(1.2); }
}
@keyframes t4-burst {
  0%, 65% { opacity: 0; transform: scale(.65); }
  66% { opacity: 1; transform: scale(.75); }
  78% { opacity: 1; transform: scale(1.15); }
  90%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes t4-say {
  0%, 65% { opacity: 0; scale: .5; }
  67% { opacity: 1; scale: 1.15; }
  70%, 84% { opacity: 1; scale: 1; }
  90%, 100% { opacity: 0; scale: 1; }
}
@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .trio { transform-origin: 50% 20%; }
  .t1 { --tw: 30vw; left: 6%; top: 10%; }
  .t2 { --tw: 38vw; left: 34%; top: 15%; }
  .t3 { --tw: 24vw; left: 70%; top: 9%; }
  .t4 { --tw: 22vw; left: 72%; top: 23%; }
}

/* ---------- 톡톡 놀이 ---------- */
.play {
  position: relative; z-index: 7;
  padding: 120px var(--gutter) 96px;
  background: var(--sky);
  text-align: center;
}
.motion .play { border-radius: 50% 50% 0 0 / var(--dome) var(--dome) 0 0; }
.play-status { margin-top: 16px; font-size: var(--t-lead); font-weight: 700; line-height: 1.4; }
.play-field {
  --pb: clamp(160px, 15vw, 220px);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px;
  max-width: calc(var(--pb) * 5 + 80px); margin: 40px auto 0;
}
.play-field li { width: var(--pb); height: var(--pb); margin-bottom: calc(var(--pb) * -.08); }
.pb {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink); cursor: pointer; touch-action: manipulation;
  font-size: var(--t-body); font-weight: 800; line-height: 1.25; letter-spacing: -.03em;
  animation: bob 5s ease-in-out infinite alternate;
  transition: transform .25s var(--ease-pop), opacity .12s;
}
.play-field li:nth-child(2n) .pb { animation-duration: 6.2s; animation-delay: -1.2s; }
.play-field li:nth-child(3n) .pb { animation-duration: 4.4s; animation-delay: -2.6s; }
.pb::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(assets/bubble-a.webp) center / 100% 100% no-repeat; }
.play-field li:nth-child(2n) .pb::before { background-image: url(assets/bubble-b.webp); }
.play-field li:nth-child(3n) .pb::before { transform: rotate(120deg); }
/* 글이 놓이는 흰 원 */
.pb::after { content: ""; position: absolute; inset: 11%; z-index: -1; border-radius: 50%; background: #fff; }
.pb > * { position: relative; max-width: 74%; }
.pb:hover { transform: scale(1.06); }
.pb:active { transform: scale(.94); }
.pb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.pb.is-popped { opacity: 0; pointer-events: none; visibility: hidden; }
.pb small { display: block; font-size: var(--t-lead); font-weight: 900; letter-spacing: -.04em; }
.pb.is-kept { cursor: default; animation-name: bob-kept; font-size: var(--t-body); }
.pb.is-kept small { font-size: clamp(24px, 2.7vw, 40px); line-height: 1.1; }
/* 세 개가 남으면 나머지 자리가 사라지고 셋이 가운데로 모여 커진다 */
.play-field.is-done { --pb: clamp(220px, 20vw, 300px); margin-top: 24px; }
.play-field.is-done li.is-gone { display: none; }
@keyframes bob-kept { from { translate: 0 -6px; } to { translate: 0 8px; } }
.play-end { margin-top: 32px; }
.play-end[hidden] { display: none; }
.play-time { font-size: var(--t-lead); font-weight: 800; line-height: 1.4; }
.play-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 16px; }
.play-sound {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; padding: 0 18px;
  border: 0; border-radius: 999px; background: #fff; color: var(--ink);
  font-size: var(--t-ui); font-weight: 700; line-height: 1.3; cursor: pointer;
}
.play-note { margin-top: 12px; color: var(--ink); }

@media (max-width: 899.98px), (max-aspect-ratio: 4/5) {
  .play { padding: 64px 12px 72px; }
  .play-status { font-size: var(--t-ui); padding: 0 8px; }
  .play-field { --pb: min(31.5vw, 150px); gap: 0; max-width: calc(var(--pb) * 3); margin-top: 20px; }
  .pb { font-size: var(--t-ui); line-height: 1.2; }
  .pb.is-kept { font-size: var(--t-ui); }
  .pb.is-kept small { font-size: 22px; }
  .play-field.is-done { --pb: min(46vw, 190px); max-width: none; }
  .play-acts .btn { width: 100%; max-width: 360px; padding: 0 20px; }
}
@media (min-width: 900px) and (min-aspect-ratio: 4/5) and (max-height: 800px) {
  .play-field { --pb: clamp(140px, 13vw, 180px); }
}
@media (prefers-reduced-motion: reduce) {
  .sky, .fx { display: none; }
}