/* talk game (site/talk.js): พูดกับน้อง */
.talk .talkmain { position: absolute; inset: 76px 0 92px; z-index: 5; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4vmin; }
.talkstage { position: relative; width: min(80vw, 44vh, 440px); aspect-ratio: 1; flex: none; }
.talkhalo { position: absolute; left: 50%; top: 50%; width: 128%; height: 128%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,240,160,.95) 0 38%, rgba(255,214,120,.55) 55%, rgba(255,190,120,0) 70%);
  transform: translate(-50%, -50%) scale(.85); opacity: .3; will-change: transform, opacity; }
.talkpet { position: absolute; inset: 0; border-radius: 50%; background: #FFF4E0; box-shadow: 0 1.4vmin 0 rgba(160,110,70,.25);
  border: 1.2vmin solid #fff; overflow: hidden; cursor: pointer; }
.talkbody { width: 100%; height: 100%; transform-origin: 50% 90%; will-change: transform; }
.talkbody img { width: 100%; height: 100%; object-fit: cover; display: block; }
.talkbody .emoji, .talkfriend .emoji { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30vmin; }
.talkfriend .emoji { font-size: 10vmin; }
.talkbadge { position: absolute; right: 0; top: 2%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #fff;
  display: grid; place-items: center; font-size: min(7vmin, 44px); box-shadow: 0 .6vmin 0 rgba(160,110,70,.25);
  pointer-events: none; animation: talkbreathe 2.4s ease-in-out infinite; }
@keyframes talkbreathe { 50% { transform: scale(1.1) } }
.talknotes { position: absolute; left: -6%; top: 0; font-size: min(9vmin, 56px); color: #E06F4E; font-weight: 700;
  text-shadow: 0 0 .6vmin #fff, 0 0 1.2vmin #fff; pointer-events: none; opacity: 0; transition: opacity .2s; }
.talkstage.talking .talknotes { opacity: 1; animation: talknote .6s ease-in-out infinite alternate; }
@keyframes talknote { from { transform: translateY(0) rotate(-8deg) } to { transform: translateY(-20%) rotate(8deg) } }
.talkfriends { display: flex; gap: 3vmin; flex: none; }
.talkfriend { width: min(24vmin, 120px); aspect-ratio: 1; border-radius: 50%; background: #FFF4E0; border: .8vmin solid #fff;
  box-shadow: 0 .8vmin 0 rgba(160,110,70,.25); overflow: hidden; cursor: pointer; }
.talkfriend img { width: 100%; height: 100%; object-fit: cover; display: block; }
.talkfriend:active { transform: scale(.94); }
.talkfx { position: absolute; inset: 0; z-index: 8; pointer-events: none; overflow: hidden; }
.talkbub { position: absolute; border-radius: 50%; pointer-events: auto; opacity: 0;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 12%, hsla(var(--hue), 90%, 80%, .55) 45%, hsla(var(--hue), 85%, 70%, .75) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); animation: talkrise var(--t, 3s) cubic-bezier(.3,.6,.4,1) forwards; }
@keyframes talkrise {
  from { transform: translate(0, 0) scale(.3); opacity: 0 }
  12% { transform: translate(0, 0) scale(1); opacity: 1 }
  85% { opacity: .9 }
  to { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0 } }
.talknote { position: absolute; z-index: 16; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  max-width: calc(100% - 150px); background: rgba(255,255,255,.88); border-radius: 12px; padding: 5px 12px;
  font-size: clamp(11px, 2vmin, 14px); line-height: 1.35; color: var(--soft); text-align: center; }
.talknomic .talknote { color: #C0603F; }
.talknomic .talkbadge { animation: talkpoint 1.4s ease-in-out infinite; }
@keyframes talkpoint { 50% { transform: translateY(12%) } }

/* phones on their side: animal on the left, friends in a column on the right */
@media (orientation: landscape) {
  .talk .talkmain { flex-direction: row; inset: 64px 0 66px; gap: 6vmin; }
  .talkstage { width: min(56vh, 46vw, 440px); }
  .talkfriends { flex-direction: column; gap: 2.5vmin; }
  .talkfriend { width: min(17vh, 110px); }
}