/* クマの原画には重ねない。星の明るさと会社の札は、クマの横に小さく出す。 */
.asteli-guide { --bear-gold: #d9a520; }
.asteli-guide::after {
  content: "★";
  position: absolute;
  right: -4px;
  bottom: 10px;
  font-size: 18px;
  line-height: 1;
  color: var(--bear-gold);
  opacity: 0;
  transition: opacity .4s, text-shadow .4s;
  pointer-events: none;
}
.asteli-guide.bear-star-full::after { opacity: 1; text-shadow: 0 0 8px rgba(217,165,32,.85), 0 0 2px #fff; }
.asteli-guide.bear-star-half::after { opacity: .6; text-shadow: 0 0 3px rgba(217,165,32,.5); }
.asteli-guide.bear-star-faint::after { opacity: .25; text-shadow: none; }
.bear-company {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: 999px;
  background: #20242a;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
}
/* 眠いクマ：原画の目（256px 原画で左 39.6%/36.1%、右 59.6%/35.7%）の上に、まぶただけ重ねる。 */
.bear-eyes { position: absolute; z-index: 3; left: 0; top: 50%; width: 100%; aspect-ratio: 1 / 1; transform: translateY(-50%); pointer-events: none; }
.bear-eyes i { position: absolute; width: 6%; height: 6%; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; }
.bear-eyes i:first-child { left: 39.6%; top: 36.1%; }
.bear-eyes i:last-child { left: 59.6%; top: 35.7%; }
.bear-eyes i::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0; background: rgb(245,239,229); transition: height .6s; }
.bear-drowsy .bear-eyes i::before { height: 55%; border-bottom: 1.5px solid #20242a; }
.bear-asleep .bear-eyes i { overflow: visible; }
.bear-asleep .bear-eyes i::before { left: -15%; right: -15%; top: -15%; height: 130%; border-radius: 50%; }
.bear-asleep .bear-eyes i::after { content: ""; position: absolute; left: -10%; right: -10%; top: 30%; height: 45%; border-bottom: 1.6px solid #20242a; border-radius: 0 0 50% 50%; }
.bear-zzz { position: absolute; z-index: 4; left: 64%; top: -6px; width: 30px; height: 34px; pointer-events: none; font: 700 12px/1 "Segoe UI", sans-serif; color: #6c7a96; }
.bear-zzz i { position: absolute; font-style: normal; opacity: 0; animation: bear-zzz 3.2s ease-in infinite; }
.bear-zzz i:nth-child(1) { left: 0; bottom: 0; font-size: 10px; }
.bear-zzz i:nth-child(2) { left: 8px; bottom: 0; font-size: 13px; animation-delay: 1.05s; }
.bear-zzz i:nth-child(3) { left: 16px; bottom: 0; font-size: 16px; animation-delay: 2.1s; }
.bear-drowsy .bear-zzz i:nth-child(n+2) { display: none; }
.bear-drowsy .bear-zzz i { animation-duration: 4.5s; }
@keyframes bear-zzz { 0% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -22px); } }
.bear-asleep .asteli-bear-original, .bear-asleep > img { animation: bear-breathe 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes bear-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025, .985); } }
@media (prefers-reduced-motion: reduce) { .bear-zzz i { animation: none; opacity: .8; } .bear-asleep .asteli-bear-original, .bear-asleep > img { animation: none; } }
.bear-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; color: #555; }
.bear-row button { border: 1px solid #d8d2c2; background: #fffaf0; color: #4a3d1a; border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; width: auto; margin: 0; }
.bear-row button:hover { border-color: var(--bear-gold, #d9a520); }
.bear-row.bear-done button { opacity: .45; pointer-events: none; }
.bear-questions { margin-top: 12px; padding: 10px 14px; border-left: 3px solid #d9a520; background: #fffcf4; border-radius: 6px; }
.bear-questions h4 { margin: 0 0 6px; font-size: 13px; }
.bear-questions li { margin: 4px 0; }
.bear-questions .bear-row { margin-top: 2px; }