/* ---- วงดนตรีสัตว์: animal band mixer (site/band.js) ---- */
.scene.band { background: #FFF1DE url(img/stage.webp) center bottom / cover no-repeat; --slot: 120px; --card: 80px; --gap: 10px;
  --trayh: 100px; --bottom: 60px; --drum: 200px; }
.band .tip { pointer-events: none; }

/* beat lights: 1 2 3 4 */
.band-beats { position: absolute; z-index: 10; top: max(22px, calc(env(safe-area-inset-top) + 12px)); left: 50%; transform: translateX(-50%);
  display: flex; gap: clamp(10px, 2.4vmin, 22px); padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.6); }
.band-beats i { width: clamp(14px, 3vmin, 24px); aspect-ratio: 1; border-radius: 50%; background: #FFB98A; opacity: .55; }
.band-beats i:first-child { background: #FF7A5C; }
.band-beats i:nth-child(2) { background: #FFD03F; }
.band-beats i:nth-child(3) { background: #5FC77A; }
.band-beats i:nth-child(4) { background: #49A8FF; }

/* the 3-4 yr mode switch */
.band-mode { position: absolute; z-index: 12; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  font: inherit; font-weight: 700; font-size: clamp(14px, 2.6vmin, 19px); color: #fff; background: #FF8F6B; border: 0;
  border-radius: 999px; padding: 10px 16px; min-height: 52px; box-shadow: 0 5px 0 #E06F4E; cursor: pointer; }
.band-mode:active { transform: translateY(3px); box-shadow: 0 2px 0 #E06F4E; }
@media (orientation: portrait) { .band-beats { top: calc(max(10px, env(safe-area-inset-top)) + 66px); } }

/* stage spots */
.band-stage { position: absolute; z-index: 5; left: 50%; top: 80px; transform: translateX(-50%); display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--gap) calc(var(--gap) * 2); }
.band-slot { position: relative; width: var(--slot); height: calc(var(--slot) * 1.12); }
.band-slot::before { content: "♪"; position: absolute; left: 6%; top: 0; width: 88%; aspect-ratio: 1; border-radius: 50%;
  border: max(3px, .6vmin) dashed rgba(160,126,108,.45); background: rgba(255,255,255,.28); display: grid; place-items: center;
  color: rgba(160,126,108,.4); font-size: calc(var(--slot) * .3); }
.band-spot { position: absolute; left: 0; bottom: 0; width: 100%; height: 22%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,250,210,.95) 0%, rgba(255,232,150,.55) 45%, rgba(255,232,150,0) 72%); }

/* a performer */
.band-perf { position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer; touch-action: none; z-index: 2; }
.band-sway { position: absolute; left: 4%; top: 0; width: 92%; transform-origin: 50% 100%;
  animation: band-sway 1.2s ease-in-out var(--ph, 0s) infinite; }
@keyframes band-sway { 0%, 100% { transform: rotate(-5deg) translateY(0) } 25% { transform: rotate(0) translateY(-5%) }
  50% { transform: rotate(5deg) translateY(0) } 75% { transform: rotate(0) translateY(-5%) } }
.band-face { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #FFF4E0;
  border: max(4px, .8vmin) solid var(--k, #FFB98A); box-shadow: 0 .8vmin 0 rgba(107,74,58,.18); }
.band-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-face .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--slot) * .5); }
.band-icon { position: absolute; right: -2%; bottom: -2%; width: 36%; aspect-ratio: 1; border-radius: 50%; background: var(--k, #FFB98A);
  display: grid; place-items: center; font-size: calc(var(--slot) * .18); box-shadow: 0 0 0 3px #fff; line-height: 1; }
.band-zzz { position: absolute; left: 0; top: -6%; font-size: calc(var(--slot) * .24); display: none; }
.band-x { position: absolute; right: -4%; top: -6%; width: max(36px, 26%); aspect-ratio: 1; border-radius: 50%; z-index: 3;
  background: #fff; color: #E06F4E; display: grid; place-items: center; font-size: max(16px, calc(var(--slot) * .12));
  box-shadow: 0 3px 0 rgba(0,0,0,.12); cursor: pointer; }
.band-muted .band-sway { animation-play-state: paused; }
.band-muted .band-face { filter: grayscale(.85); opacity: .6; }
.band-muted .band-icon { filter: grayscale(1); opacity: .6; }
.band-muted .band-zzz { display: block; animation: bob 1.6s ease-in-out infinite; }
.band-in { animation: band-in .45s cubic-bezier(.3,1.5,.5,1); }
@keyframes band-in { from { transform: translateY(18%) scale(.4); opacity: 0 } }
.band-out { animation: band-out .35s ease-in forwards; pointer-events: none; }
@keyframes band-out { to { transform: translateY(20%) scale(.3); opacity: 0 } }
.band-party { animation: band-party 1.2s ease-in-out 2; }
@keyframes band-party { 25% { transform: translateY(-14%) rotate(-10deg) } 50% { transform: translateY(0) } 75% { transform: translateY(-14%) rotate(10deg) } }
.band-held { transform: scale(1.06); }

/* the tray of animals */
.band-tray { position: absolute; z-index: 6; left: 50%; bottom: var(--bottom); transform: translateX(-50%); display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--gap); }
.band-card { position: relative; width: var(--card); height: var(--card); cursor: pointer; touch-action: none; transition: opacity .3s, transform .2s; }
.band-card .band-face { border-width: max(3px, calc(var(--card) * .05)); box-shadow: 0 .6vmin 0 rgba(107,74,58,.18); }
.band-card .band-icon { width: 40%; font-size: calc(var(--card) * .2); box-shadow: 0 0 0 2px #fff; }
.band-card .band-face .emoji { font-size: calc(var(--card) * .5); }
.band-card.band-on { opacity: .4; transform: scale(.9); }

.band-ghost { position: absolute; left: 0; top: 0; border-radius: 50%; overflow: hidden; background: #FFF4E0; z-index: 60;
  box-shadow: 0 0 0 4px #fff, 0 2vmin 3vmin rgba(0,0,0,.2); }
.band-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* tap-along drum (3-4 yr) */
.band-drum { display: none; position: absolute; z-index: 6; left: 50%; bottom: var(--bottom); transform: translateX(-50%);
  width: var(--drum); height: var(--trayh); align-items: center; justify-content: center; }
.band-rhythm .band-drum { display: flex; }
.band-rhythm .band-tray { display: none; }
.band-drumhead { width: calc(var(--trayh) * .92); aspect-ratio: 1; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 45% 40%, #FFFDF5 0 45%, #F6E7C8 70%, #EBD3A6 79%, #FF7A5C 80% 92%, #D9573D 93%);
  box-shadow: 0 1.2vmin 0 #B9472F; touch-action: none; }
.band-drumhead span { font-weight: 700; font-size: calc(var(--trayh) * .12); color: rgba(185,71,47,.45); pointer-events: none; }
.band-stars { position: absolute; top: -4%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; font-size: calc(var(--trayh) * .12);
  pointer-events: none; white-space: nowrap; }
.band-stars i { font-style: normal; animation: band-in .4s cubic-bezier(.3,1.5,.5,1); }

/* celebration banner, floating notes */
.band-banner { position: absolute; z-index: 16; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none;
  background: rgba(255,255,255,.94); color: #E06F4E; font-weight: 700; font-size: clamp(20px, 5vmin, 40px); padding: 12px 28px;
  border-radius: 999px; box-shadow: 0 1vmin 0 rgba(224,111,78,.25); white-space: nowrap; max-width: 94vw; text-overflow: ellipsis; overflow: hidden; }
.band-banner.show { animation: band-banner 2.6s ease forwards; }
@keyframes band-banner { 12% { transform: translate(-50%, -50%) scale(1.08); opacity: 1 } 20%, 82% { transform: translate(-50%, -50%) scale(1); opacity: 1 }
  100% { transform: translate(-50%, -60%) scale(.9); opacity: 0 } }
.band-note { position: absolute; font-size: clamp(22px, 5vmin, 44px); font-weight: 700; pointer-events: none; will-change: transform, opacity;
  text-shadow: 0 0 4px #fff, 0 0 2px #fff; }
.band-slot.band-filled::before { opacity: 0; }