/* Chủ hội finisher: kích thước nhân vật neo theo chiều cao đài.
   Wrapper giữ vị trí; chỉ khối nhân vật bên trong phản hồi khi chạm. */
.dai { z-index: 2; }
.loi-ho { top: 46%; }
.canh-ho:has(.loi-bong:not([hidden])) .trang-thai { visibility: hidden; }
.dai .dai-nen { position: absolute; inset: 0; }
.dai .bong-chu-ho {
  position: absolute;
  top: 12%;
  left: 50%;
  height: 50%;
  min-height: 96px;
  max-height: 148px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translateX(-50%);
  z-index: 2;
  touch-action: manipulation;
}
.nhan-vat-bong { display: block; width: 100%; height: 100%; position: relative; transform-origin: 50% 80%; }
.dai .bong {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  animation: none;
  filter: drop-shadow(0 5px 6px #03192b80);
}
.huy-chuong-bong { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bong-chu-ho:active .nhan-vat-bong { transform: scale(.97); }
.bong-chu-ho.dang-chao .nhan-vat-bong { animation: bong-chao 720ms cubic-bezier(.2,.8,.26,1); }
.dai.den-sang .nhan-vat-bong { animation: bong-mung 950ms cubic-bezier(.2,.8,.26,1) 2; }
.dai.den-sang .bong-chu-ho.dang-chao .nhan-vat-bong { animation: bong-chao 720ms cubic-bezier(.2,.8,.26,1); }
.nhan-hoi {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  font-size: 6px; letter-spacing: 1.5px; color: #ffdf9e;
  white-space: nowrap; text-align: center;
}
.bien-chu-ho {
  position: absolute; top: 64%; left: 50%; transform: translateX(-50%);
  color: #efcf91; font-size: 6px; font-weight: 600; letter-spacing: 1.5px;
  white-space: nowrap;
}
.dai .mam-an {
  top: 69%; left: 35%; width: 30%; height: 7%; gap: 9%;
  z-index: 3; color: #e5d09e; font-size: 18px; line-height: 1;
}
.dai .mam-an .icon { width: 24px; height: 24px; flex: 0 0 24px; filter: drop-shadow(0 2px 1px #0005); }
.dai .sen-no { top: 65%; padding: 0 10%; pointer-events: none; }
.dai .sen-no svg { width: 42px; height: 32px; }
.bang-ten-dai {
  position: absolute; top: 78%; left: 50%; transform: translateX(-50%);
  color: #ffe8b2; font-size: 5px; letter-spacing: .8px; white-space: nowrap;
}
.loi-bong {
  position: absolute; z-index: 4; top: 8%; left: 50%;
  transform: translate(-50%, -100%);
  width: max-content; max-width: 86%;
  background: #fff0d3; color: #082054;
  border: 1px solid #e8bf76; border-radius: 14px;
  padding: 9px 14px; font-size: 10px; line-height: 1.6;
  box-shadow: 0 8px 20px #0003;
  text-align: center; pointer-events: none;
  animation: loi-chao 220ms cubic-bezier(.2,.8,.26,1) both;
}
.loi-bong::after {
  content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: #fff0d3;
}
.dai .phao-giay { top: 54%; z-index: 4; }
@keyframes bong-chao {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-6px) rotate(-6deg); }
  65% { transform: translateY(-3px) rotate(3deg); }
}
@keyframes bong-mung {
  0%,100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-9px) rotate(-4deg); }
  65% { transform: translateY(-3px) rotate(3deg); }
}
@keyframes loi-chao {
  from { transform: translate(-50%, calc(-100% + 5px)); opacity: 0; }
  to { transform: translate(-50%, -100%); opacity: 1; }
}
@media (max-width: 700px) {
  .dai .bong-chu-ho { top: 12%; height: 50%; }
  .dai .mam-an { gap: 9%; font-size: 16px; }
  .dai .mam-an .icon { width: 20px; height: 20px; flex-basis: 20px; }
  .dai .sen-no svg { width: 34px; height: 26px; }
  .nhan-hoi { font-size: 5px; letter-spacing: 1px; }
  .bien-chu-ho { font-size: 5px; letter-spacing: .8px; }
  .bang-ten-dai { font-size: 4px; letter-spacing: .5px; }
  .loi-bong { font-size: 9px; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nhan-vat-bong, .loi-bong { animation: none !important; }
  .bong-chu-ho:active .nhan-vat-bong { transform: none; }
}