/* köşelerde dans edenler: sadece transform/opacity animasyonu (ekran kartında döner) */
.dancers { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 125; pointer-events: none; --dc-w: clamp(64px, 5.4vw, 88px); transition: opacity .4s, visibility .4s; }
.dc { position: absolute; bottom: 0; width: var(--dc-w); aspect-ratio: 120 / 200; padding: 0; border: 0; background: none; color: inherit; pointer-events: auto; cursor: pointer; transition: transform .8s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), opacity .5s; -webkit-tap-highlight-color: transparent; }
.dc--sherlock { left: 10px; }
.dc--watson { right: 14px; transition-delay: .12s; }
.dc.is-away { transform: translateY(108%); opacity: 0; pointer-events: none; }
.dc.is-away .dc__rig, .dc.is-away .dc__p, .dc.is-away .dc__shadow, .dc.is-away b { animation-play-state: paused; }
.dc:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; border-radius: 14px; }
.dc__rig, .dc__p { position: absolute; inset: 0; display: block; }
.dc__p svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dc__rig { transform-origin: 50% 95%; animation: dc-idle 3.2s ease-in-out infinite; }
.dc--watson .dc__rig { animation-delay: -1.6s; }
.dc__shadow { position: absolute; left: 20%; right: 20%; bottom: 1%; height: 5%; border-radius: 50%; background: rgba(0, 0, 0, .28); }
.dc__arml { animation: dc-idle-l 3.2s ease-in-out infinite; }
.dc__armr { animation: dc-idle-r 3.2s ease-in-out infinite; }
@keyframes dc-idle { 50% { transform: translateY(-1.2%) scaleY(1.015); } }
@keyframes dc-idle-l { 50% { transform: rotate(5deg); } }
@keyframes dc-idle-r { 50% { transform: rotate(-5deg); } }

/* pipo dumanı ve çay buharı */
.dc__puff, .dc__steam { position: absolute; width: 9%; aspect-ratio: 1; margin: -4.5% 0 0 -4.5%; border-radius: 50%; background: #eef0f3; box-shadow: 0 0 0 1.4px rgba(20, 20, 22, .55); opacity: 0; animation: dc-puff 2.7s ease-out infinite; }
.dc__steam { width: 6%; margin: -3% 0 0 -3%; animation: dc-steam 2.2s ease-out infinite; }
.dc__puff:nth-of-type(2), .dc__steam:nth-of-type(2) { animation-delay: -.9s; }
.dc__puff:nth-of-type(3), .dc__steam:nth-of-type(3) { animation-delay: -1.8s; }
@keyframes dc-puff { 0% { opacity: 0; transform: scale(.35); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(110%, -380%) scale(1.4); } }
@keyframes dc-steam { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(-60%, -520%) scale(1.3); } }

/* müzik çalıyor: vuruşa göre dans. dc-b- ile başlayanlar şarkının anına eşitleniyor (js/dancers.js) */
.is-dancing .dc__rig { animation: dc-b-bounce calc(var(--beat) * 2) linear infinite; }
.is-dancing .dc__shadow { animation: dc-b-shadow calc(var(--beat) * 2) linear infinite; }
.is-dancing .dc__legl { animation: dc-b-legl calc(var(--beat) * 2) ease-in-out infinite; }
.is-dancing .dc__legr { animation: dc-b-legr calc(var(--beat) * 2) ease-in-out infinite; }
.is-dancing .dc__headwrap { animation: dc-b-head calc(var(--beat) * 2) ease-in-out infinite; }
.is-dancing .dc--sherlock .dc__armr { animation: dc-b-point calc(var(--beat) * 2) linear infinite; }
.is-dancing .dc--sherlock .dc__arml { animation: dc-b-swing calc(var(--beat) * 2) ease-in-out infinite; }
.is-dancing .dc--sherlock .dc__cape { animation: dc-b-cape calc(var(--beat) * 2) ease-in-out infinite; }
.is-dancing .dc--sherlock .dc__hat { animation: dc-b-hat calc(var(--beat) * 4) linear infinite; }
.is-dancing .dc--watson .dc__rig { animation-name: dc-b-step; }
.is-dancing .dc--watson .dc__arml { animation: dc-b-roof var(--beat) ease-in-out infinite; }
.is-dancing .dc--watson .dc__armr { animation: dc-b-tea calc(var(--beat) * 2) ease-in-out infinite; }
.is-dancing .dc--watson .dc__headwrap { animation-name: dc-b-nod; }
.is-dancing .dc--watson .dc__hat { animation: dc-b-lift calc(var(--beat) * 8) linear infinite; }

@keyframes dc-b-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg) scale(1.05, .94); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  25%, 75% { transform: translateY(-5%) rotate(0) scale(.98, 1.03); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  50% { transform: translateY(0) rotate(3deg) scale(1.05, .94); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
}
@keyframes dc-b-step {
  0%, 100% { transform: translate(-5%, 0) scale(1.05, .94); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  25%, 75% { transform: translate(0, -4%) scale(.98, 1.03); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  50% { transform: translate(5%, 0) scale(1.05, .94); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
}
@keyframes dc-b-shadow { 0%, 50%, 100% { transform: scaleX(1.08); } 25%, 75% { transform: scaleX(.82); opacity: .6; } }
@keyframes dc-b-legl { 0%, 50%, 100% { transform: rotate(0); } 25% { transform: rotate(16deg); } }
@keyframes dc-b-legr { 0%, 50%, 100% { transform: rotate(0); } 75% { transform: rotate(-16deg); } }
@keyframes dc-b-head { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } }
@keyframes dc-b-nod { 0%, 50%, 100% { transform: translateY(1.2%) rotate(-3deg); } 25%, 75% { transform: translateY(-1%) rotate(3deg); } }
/* büyüteçle disko: 1. vuruşta yukarı, 2. vuruşta çapraz aşağı */
@keyframes dc-b-point {
  0%, 100% { transform: rotate(-122deg); animation-timing-function: ease-out; }
  30% { transform: rotate(-116deg); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
  50% { transform: rotate(22deg); animation-timing-function: ease-out; }
  80% { transform: rotate(16deg); animation-timing-function: cubic-bezier(.6, 0, .3, 1); }
}
@keyframes dc-b-swing { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-16deg); } }
@keyframes dc-b-cape { 0%, 100% { transform: scaleX(1.04) skewX(-3deg); } 50% { transform: scaleX(.97) skewX(3deg); } }
@keyframes dc-b-hat { 0%, 72%, 100% { transform: none; } 80% { transform: translateY(-8%) rotate(-14deg); } 90% { transform: translateY(-2%) rotate(5deg); } }
/* Watson: bir eli tavana, çay eli kıpırdamıyor (dökülmesin) */
@keyframes dc-b-roof { 0%, 100% { transform: rotate(152deg); animation-timing-function: cubic-bezier(.2, .8, .4, 1); } 50% { transform: rotate(118deg); animation-timing-function: cubic-bezier(.6, 0, .9, .5); } }
@keyframes dc-b-tea { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes dc-b-lift { 0%, 86%, 100% { transform: none; } 90%, 96% { transform: translateY(-9%) rotate(10deg); } }

/* tıklayınca şapka selamı + laf */
.dc.is-tip .dc__tip { animation: dc-tip 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.dc--watson.is-tip .dc__tip { animation-name: dc-tip-w; }
@keyframes dc-tip { 0%, 100% { transform: none; } 30%, 70% { transform: translate(8%, -14%) rotate(-24deg); } }
@keyframes dc-tip-w { 0%, 100% { transform: none; } 30%, 70% { transform: translate(-8%, -14%) rotate(24deg); } }
.dc__say {
  position: absolute; bottom: 112%; left: 18%; white-space: nowrap; pointer-events: none;
  font: 600 12px/1.2 var(--mono, monospace); color: #141416; background: #fffaf0; border: 2px solid #141416; border-radius: 12px;
  padding: 6px 9px; box-shadow: 3px 3px 0 #141416; opacity: 0; transform: translateY(6px) scale(.85); transform-origin: 12px 100%;
  transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.dc--watson .dc__say { left: auto; right: 18%; transform-origin: calc(100% - 12px) 100%; }
.dc__say::after { content: ''; position: absolute; top: 100%; left: 12px; border: 7px solid transparent; border-top-color: #141416; border-bottom: 0; }
.dc--watson .dc__say::after { left: auto; right: 12px; }
.dc.is-tip .dc__say { opacity: 1; transform: none; }

/* yerine göre çekilsinler: poligonda nişan alırken, sorgu odasında */
body.in-range .dancers, html.qz-open .dancers { opacity: 0; visibility: hidden; }
@media (min-width: 760px) { .hud, .toasts { left: calc(var(--pad) + clamp(64px, 5.4vw, 88px)); } }
@media (max-width: 759px) { .dancers { display: none; } }
.reduce-motion .dc, .reduce-motion .dc * { animation: none !important; }