/**
 * YAZME | AI Mascot Stylesheet (Tamagotchi Edition)
 * Версия 10.1.2 | FIX: Бронебойная защита от раздувания SVG
 */

.critter-draggable {
    position: fixed; 
    z-index: 9999;
    width: 100px; 
    height: 115px;
    pointer-events: none; /* Контейнер прозрачен для кликов, чтобы не блокировать интерфейс */
    filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3));
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    touch-action: none;
    
    --critter-main: #FFD700;
    --critter-accent: #40E0D0;
    --critter-glow: rgba(255, 215, 0, 0.3);
}

.critter-draggable.is-dragging {
    transform: scale(1.1);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
    transition: none; /* Убираем задержку при перетаскивании */
}

/* Обертка для самой SVG улитки */
#critter-svg-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    pointer-events: auto; /* Сама улитка кликабельна */
    cursor: grab;
}

.critter-draggable.is-dragging #critter-svg-wrapper {
    cursor: grabbing;
}

/* 🔥 ЖЕСТКИЙ ФИКС РАЗМЕРОВ 🔥 (Защита от раздувания на весь экран) */
#critter-svg-wrapper svg {
    width: 100px !important;
    height: 115px !important;
    max-width: 100px !important;
    max-height: 115px !important;
    display: block !important;
    overflow: visible; /* Чтобы графика не обрезалась, если чуть вылезает */
}

/* Контур (Домик) между ботами и полем ввода */
.critter-chalk-outline {
    opacity: 0;
    transition: opacity 0.5s ease, filter 0.3s ease;
    pointer-events: none;
}
.critter-chalk-outline.visible {
    opacity: 1;
}
.critter-chalk-outline.snapping {
    filter: drop-shadow(0 0 10px var(--accent-primary, var(--critter-accent)));
}

.snap-anim {
    transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

#critter-markup {
    filter: drop-shadow(0 0 5px var(--critter-glow));
}

#snail-body-group {
    transform-origin: left bottom;
    animation: crawl-motion 2s infinite alternate ease-in-out;
}
@keyframes crawl-motion { 0% { transform: scaleX(1); } 100% { transform: scaleX(1.08); } }

/* === АНИМАЦИИ ПИТОМЦА === */
#critter-markup.anim-squish { animation: snail-squish 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; }
@keyframes snail-squish { 0%, 100% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1.2, 0.7) translateY(15px); } }

#critter-markup.anim-jump { animation: mascot-jump 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important; }
@keyframes mascot-jump { 0% { transform: scale(1, 1); } 20% { transform: scale(1.2, 0.8); } 50% { transform: scale(0.9, 1.1) translateY(-30px); } 80% { transform: scale(1.05, 0.95); } 100% { transform: scale(1, 1); } }

#critter-markup.anim-hide #snail-head-group { transform: translate(-10px, 8px) scale(0.8); opacity: 0.5; }
#critter-markup.talking-anim #snail-mouth { animation: snail-talk 0.2s infinite alternate; }
@keyframes snail-talk { 0% { transform: scaleY(1); } 100% { transform: scaleY(2.5) translateY(-1px); } }

#critter-markup.anim-eat { animation: critterEat 0.4s ease 3 !important; }
@keyframes critterEat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15) rotate(8deg); } }

#critter-markup.anim-sleep { animation: critterSleep 3s ease infinite !important; }
@keyframes critterSleep { 0%, 100% { transform: scaleY(1); opacity: 0.8; filter: brightness(0.8); } 50% { transform: scaleY(0.9); opacity: 0.5; filter: brightness(0.5); } }

#critter-markup.anim-sad { animation: critterSad 1.5s ease infinite !important; }
@keyframes critterSad { 0%, 100% { transform: rotate(0deg); filter: grayscale(0%); } 25%, 75% { transform: rotate(-5deg); filter: grayscale(30%); } }

#critter-markup.anim-walk { animation: critterWalk 2s ease !important; }
@keyframes critterWalk { 0%, 100% { transform: translateX(0) translateY(0); } 25%, 75% { transform: translateX(-15px) translateY(-10px); } 50% { transform: translateX(-30px) translateY(0); } }

/* =========================================================================
   УМНЫЙ БАББЛ ДЛЯ ФАКТОВ (АДАПТИВНЫЙ ПОД ЦВЕТ ТЕМЫ)
   ========================================================================= */
#sign-container {
    position: absolute;
    bottom: 100%; 
    left: 50%;
    margin-bottom: -15px; /* Опустили облачко вплотную к улитке */
    background: var(--bg-panel, #1e1f20); 
    color: var(--text-primary, #ffffff);  
    padding: 12px 18px; 
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    border: 2px solid var(--accent-primary, var(--critter-main)); 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2), 0 0 15px rgba(107, 72, 255, 0.1);
    z-index: 10001;
    pointer-events: none;
    
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15), background 0.3s ease, color 0.3s ease;
    transform-origin: bottom center;
    opacity: 0;
    transform: translate(-50%, 10px) scale(0.8); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 250px; 
    max-width: 85vw; /* Защита для узких экранов */
    line-height: 1.4;
    word-wrap: break-word; 
}

/* Треугольный хвостик (Внешний контур) */
#sign-container::before {
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -10px; 
    border-width: 10px 10px 0; 
    border-style: solid; 
    border-color: var(--accent-primary, var(--critter-main)) transparent transparent transparent; 
    display: block; 
    width: 0;
    transition: border-color 0.3s ease;
}

/* Треугольный хвостик (Внутренний фон) */
#sign-container::after {
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -7px; 
    border-width: 7px 7px 0; 
    border-style: solid; 
    border-color: var(--bg-panel, #1e1f20) transparent transparent transparent; 
    display: block; 
    width: 0;
    transition: border-color 0.3s ease;
}

#sign-container.active { 
    opacity: 1; 
    transform: translate(-50%, 0) scale(1); 
    pointer-events: auto;
}

#sign-container.error { 
    background: var(--bg-panel, #1e1f20); 
    border-color: #ef4444; 
    box-shadow: 0 10px 25px rgba(239,68,68,0.2); 
}
#sign-container.error::before { 
    border-color: #ef4444 transparent transparent transparent; 
}

/* === СЕРДЕЧКО === */
.critter-heart {
    position: absolute; bottom: 50%; pointer-events: none; z-index: 10002;
    animation: heart-float 1.2s ease-out forwards;
}
@keyframes heart-float {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    30% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -80px) scale(0.8); opacity: 0; }
}

/* =========================================================================
   CONTROL CENTER (ВЫЕЗЖАЕТ ВНИЗ ИЗ УЛИТКИ)
   ========================================================================= */

.critter-control-center {
    position: absolute;
    top: 100%; 
    left: 50%;
    
    background: var(--bg-panel, rgba(20, 20, 22, 0.85)); 
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.15));
    border-radius: 28px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    
    display: flex;
    flex-direction: column;
    gap: 12px;
    
    padding: 0 24px; 
    max-height: 0; 
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(-50%) translateY(-20px) scale(0.9); 
    transform-origin: top center; 
    z-index: 100;
}

/* Состояние "Открыто" */
.critter-draggable.menu-active .critter-control-center {
    max-height: 200px;
    padding: 16px 24px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(5px) scale(1); 
}

/* === ВЕРХНИЙ РЯД: СТАТЫ === */
.cc-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1)); 
    width: 100%;
    justify-content: space-between;
    white-space: nowrap; 
}
.stat-micro { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-primary, rgba(255, 255, 255, 0.95)); }
.micro-ring { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--ring-color, #40E0D0) calc(var(--val) * 1%), var(--glass-bg, rgba(255, 255, 255, 0.1)) 0); position: relative; }
.micro-ring::after { content: ''; position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; background: var(--bg-panel, #1a1a1c); border-radius: 50%; }
.stat-micro.hunger .micro-ring { --ring-color: #ff9f0a; }   
.stat-micro.happiness .micro-ring { --ring-color: #30d158; } 
.stat-micro.energy .micro-ring { --ring-color: #0a84ff; }    
.stat-micro .stat-value { font-size: 13px; opacity: 0.85; font-variant-numeric: tabular-nums; }

/* === НИЖНИЙ РЯД: КНОПКИ ДЕЙСТВИЙ === */
.cc-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
}
.cc-btn {
    width: 48px; height: 48px; border-radius: 50%; background: var(--glass-bg, rgba(255, 255, 255, 0.08)); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, #fff); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); padding: 0; outline: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.cc-btn:hover { background: var(--accent-primary, rgba(255, 255, 255, 0.15)); color: #fff; transform: scale(1.1) translateY(-3px); border-color: var(--accent-primary, rgba(255, 255, 255, 0.2)); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); }
.cc-btn:active { transform: scale(0.92); opacity: 0.8; }

/* === АДАПТАЦИЯ ДЛЯ МОБИЛЬНЫХ === */
@media (max-width: 600px) {
    #sign-container { 
        width: 250px;
        max-width: calc(100vw - 32px); 
        padding: 10px 14px; 
        font-size: 13px; 
        transform: translate(-50%, 10px) scale(0.95); 
    }
    #sign-container.active { 
        transform: translate(-50%, 0) scale(1); 
    }
    
    .critter-draggable.menu-active .critter-control-center { padding: 14px 18px; transform: translateX(-50%) translateY(10px) scale(0.9); }
    .cc-stats { gap: 12px; padding-bottom: 12px; }
    .stat-micro { font-size: 12px; gap: 5px; }
    .micro-ring { width: 12px; height: 12px; }
    .micro-ring::after { top: 2.5px; left: 2.5px; right: 2.5px; bottom: 2.5px; }
    .cc-actions { gap: 10px; }
    .cc-btn { width: 44px; height: 44px; font-size: 18px; }
}

/* --- ИГРОВЫЕ ОБЪЕКТЫ --- */
.critter-ball, .critter-leaf { position: absolute; font-size: 32px; z-index: 10003; pointer-events: none; top: 0; left: 0; opacity: 0; }
.critter-ball { animation: ball-strike 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
@keyframes ball-strike { 0% { transform: translate(-150px, -150px) rotate(0deg) scale(0.5); opacity: 0; } 20% { opacity: 1; } 45% { transform: translate(30px, 30px) rotate(360deg) scale(1.2); } 50% { transform: translate(45px, 45px) rotate(400deg) scale(1.1) skewX(-15deg); } 100% { transform: translate(250px, -150px) rotate(800deg) scale(0.6); opacity: 0; } }
.critter-leaf { animation: leaf-fall 1.2s ease-in-out forwards; }
@keyframes leaf-fall { 0% { transform: translate(50px, -200px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 40% { transform: translate(-20px, -120px) rotate(45deg); } 70% { transform: translate(30px, -60px) rotate(-20deg); } 100% { transform: translate(15px, 25px) rotate(10deg) scale(0.8); opacity: 0; } }
.critter-hit-effect { position: absolute; font-size: 40px; top: 10px; left: 20px; z-index: 10004; pointer-events: none; animation: hit-pop 0.4s ease-out forwards; }
@keyframes hit-pop { 0% { transform: scale(0.5) rotate(-20deg); opacity: 1; filter: brightness(2); } 50% { transform: scale(1.3) rotate(10deg); opacity: 1; filter: brightness(1); } 100% { transform: scale(1.5) rotate(20deg); opacity: 0; } }