/* コメントペット（/pet 単体・/overlay 組み込み 共用） */
.cpet { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.cpet .layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: none; }
.cpet .layer.on { display: block; }
.cpet video { display: block; }
.cpet .run { background-repeat: no-repeat; image-rendering: auto; }
/* ボール */
.cpet-ball { position: absolute; left: 0; top: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 900; color: #0b101c; will-change: transform; box-shadow: 0 6px 14px rgba(0,0,0,0.35), inset -6px -8px 0 rgba(0,0,0,0.12), inset 5px 6px 0 rgba(255,255,255,0.55); background: radial-gradient(circle at 35% 30%, #fff 0%, var(--c, #ffd45c) 55%, #d9a53a 100%); overflow: hidden; padding: 6px; line-height: 1.1; }
.cpet-ball .nm { font-size: var(--fs, 16px); word-break: break-all; }
.cpet-ball.img { padding: 0; background: #fff; border: 3px solid #fff; }
.cpet-ball.img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.cpet-ball.pop { animation: pop 0.45s ease-out forwards; }
@keyframes pop { 0% { transform: var(--t) scale(1); opacity: 1; } 60% { transform: var(--t) scale(1.5); opacity: 0.9; } 100% { transform: var(--t) scale(2.2); opacity: 0; } }
/* 土煙 */
.cpet-dust { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(214, 196, 170, 0.75); pointer-events: none; animation: dust 0.6s ease-out forwards; }
@keyframes dust { 0% { transform: translate(0, 0) scale(0.5); opacity: 0.8; } 100% { transform: translate(var(--dx), -26px) scale(1.8); opacity: 0; } }
/* 吹き出し */
.cpet-bubble { position: absolute; max-width: 340px; background: #fff; color: #0b101c; border: 3px solid #5aa9ff; border-radius: 14px; padding: 8px 12px; font-size: 18px; font-weight: 900; line-height: 1.35; box-shadow: 0 10px 24px rgba(0,0,0,0.3); transform: translate(-50%, -100%) scale(0); transform-origin: 50% 100%; opacity: 0; transition: transform 0.35s cubic-bezier(.2,1.4,.4,1), opacity 0.2s; }
.cpet-bubble.on { transform: translate(-50%, -100%) scale(1); opacity: 1; }
.cpet-bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -12px; width: 0; height: 0; border: 10px solid transparent; border-top-color: #5aa9ff; border-bottom: 0; transform: translateX(-50%); }
.cpet-bubble .who { display: block; font-size: 12px; color: #3b7dff; margin-bottom: 2px; }

/* 成長・応援 */
.cpet-label { position: absolute; left: 0; top: 6px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; color: #fff; background: rgba(11,16,28,0.75); border: 1.5px solid #d9b45b; border-radius: 999px; padding: 2px 8px; white-space: nowrap; font-family: 'Zen Kaku Gothic New', sans-serif; }
.cpet-xp { width: 64px; height: 7px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; }
.cpet-xp i { display: block; height: 100%; background: linear-gradient(90deg, #58c6e2, #d9b45b); transition: width 0.4s; }
.cpet-xpn { font-size: 10px; color: #ffe08a; }
.cpet-gain { position: absolute; right: 6px; top: -4px; font-size: 13px; color: #ffe08a; text-shadow: 0 1px 2px #000; animation: cpet-gain 1.4s ease-out forwards; pointer-events: none; }
@keyframes cpet-gain { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
.cpet-say { position: absolute; transform: translate(-50%, -100%) scale(0.8); opacity: 0; transition: transform 0.25s cubic-bezier(.2,1.4,.4,1), opacity 0.2s; font-size: 16px; font-weight: 900; color: #0b101c; background: #fff; border: 3px solid #ffe08a; border-radius: 12px; padding: 4px 10px; white-space: nowrap; font-family: 'Zen Kaku Gothic New', sans-serif; z-index: 3; }
.cpet-say.on { transform: translate(-50%, -100%) scale(1); opacity: 1; }
.cpet-say.big { font-size: 24px; border-color: #ff86b0; }
.cpet-say.cheer { border-color: #58c6e2; color: #1a4a8a; }
.cpet-say.sad { border-color: #93a0ba; color: #5f6c85; }
.cpet-spark { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--c, #ffe08a); animation: cpet-spark 0.9s ease-out forwards; pointer-events: none; }
@keyframes cpet-spark { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-70px) scale(0.2); opacity: 0; } }
.cpet.cheer .layer.on { animation: cpet-cheer 0.45s ease-in-out infinite; }
@keyframes cpet-cheer { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.cpet.levelup .layer.on { animation: cpet-levelup 1.2s ease-out; }
@keyframes cpet-levelup { 0% { filter: brightness(1); } 30% { filter: brightness(2.2) saturate(1.4); } 100% { filter: brightness(1); } }

[hidden] { display: none !important; }
.cpet-imgbox { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); }
/* 段階フォルダの front.png（透過PNG）を CSS で動かす: 待機＝呼吸とゆれ、よろこび＝2回はねる */
.cpet-img { display: block; width: auto; transform-origin: 50% 100%; }
.cpet-img.idle { animation: cpet-breathe 4s ease-in-out infinite, cpet-sway 6s ease-in-out infinite; }
.cpet-img.anim { animation: none !important; } /* アニメ WebP（idle.webp / happy.webp）は絵の中で動く */
@keyframes cpet-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 0.985); } }
@keyframes cpet-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
.cpet-img.happy.play { animation: cpet-hop 3s cubic-bezier(.3,.9,.4,1) 1; }
@keyframes cpet-hop { 0% { transform: translateY(0) scale(1); } 8% { transform: translateY(4%) scale(1.06, 0.9); } 22% { transform: translateY(-26%) scale(0.95, 1.08) rotate(-4deg); } 36% { transform: translateY(0) scale(1.05, 0.94); } 48% { transform: translateY(-18%) scale(0.97, 1.05) rotate(4deg); } 60% { transform: translateY(0) scale(1.04, 0.96); } 75%, 100% { transform: translateY(0) scale(1); } }