/* --- СИСТЕМА ТАМАГОЧИ --- */
#hunger-container {
    position: absolute;
    top: max(140px, calc(env(safe-area-inset-top) + 140px)); /* Под кнопками истории чата */
    left: max(10px, env(safe-area-inset-left));
    background: rgba(255, 255, 255, 0.85);
    padding: 6px 10px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 500;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}

#bonfire-indicator {
    display: none;
    font-size: 18px;
    animation: bonfirePulse 1.5s infinite ease-in-out;
    filter: drop-shadow(0 0 6px rgba(255, 150, 0, 0.8));
    cursor: help;
}
@keyframes bonfirePulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 150, 0, 0.5)); }
    50% { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(255, 150, 0, 1)); }
}

@media (max-width: 768px) {
    #hunger-container {
        top: max(85px, calc(env(safe-area-inset-top) + 85px)); /* Чуть выше на мобильных, так как кнопки чата там в ряд */
        padding: 4px 8px;
    }
    .hunger-icon { font-size: 16px; }
    .hunger-bar-bg { width: 60px; height: 10px; }
}
.hunger-icon { font-size: 20px; }
.hunger-bar-bg {
    width: 100px;
    height: 12px;
    background: #eee;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
#hunger-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ff9de2);
    transition: width 0.3s ease, background 0.3s ease;
}
#hunger-fill.starving { background: #ff4757; }

.map-apple {
    position: absolute;
    font-size: 24px;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
    transform: translate(-50%, -50%);
    animation: floatApple 2s infinite ease-in-out;
    z-index: 50;
}
@keyframes floatApple {
    0%, 100% { margin-top: 0; }
    50% { margin-top: -10px; }
}

.map-star {
    position: absolute;
    font-size: 28px;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.8));
    transform: translate(-50%, -50%);
    animation: floatStar 1.5s infinite ease-in-out;
    z-index: 50;
}
@keyframes floatStar {
    0%, 100% { margin-top: 0; filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6)); }
    50% { margin-top: -8px; filter: drop-shadow(0 0 18px rgba(255, 215, 0, 1)); }
}

.map-egg {
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.35));
    transform: translate(-50%, -50%);
    animation: floatApple 2s infinite ease-in-out;
    z-index: 50;
}

.npc-chicken {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
    transform-origin: center bottom;
    will-change: transform;
}

.npc-chicken-sprite {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
}

.npc-chicken.mirror .npc-chicken-sprite {
    transform: scaleX(-1);
}

.player.hungry .pony-sprite {
    filter: grayscale(80%) sepia(20%);
}
.player-name.hungry-name {
    color: #a4b0be !important;
}

/* --- МИНИ-ИГРА: ЗАРАЖЕНИЕ --- */
.player.infected .pony-sprite {
    /* Делаем пони зелено-черной и светящейся */
    filter: hue-rotate(90deg) saturate(300%) contrast(150%) drop-shadow(0 0 10px #2ed573);
}

.player.infected .player-name {
    color: #2ed573 !important;
    text-shadow: 0 0 5px rgba(46, 213, 115, 0.8) !important;
    font-weight: 900;
}

/* Переопределяем голод, если игрок заражен (инфекция сильнее голода) */
.player.infected.hungry .pony-sprite {
    filter: hue-rotate(90deg) saturate(300%) contrast(150%) drop-shadow(0 0 10px #2ed573);
    opacity: 1;
}

/* Уведомления мини-игры */
#minigame-alert {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 30px;
    border-radius: 30px;
    font-family: 'Chewy', cursive;
    font-size: 24px;
    z-index: 4000;
    text-align: center;
    border: 3px solid #ff4757;
    box-shadow: 0 0 20px rgba(255, 71, 87, 0.5);
    pointer-events: none;
    display: none;
    animation: slideDownFade 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideDownFade {
    0% { top: -50px; opacity: 0; }
    100% { top: max(20px, env(safe-area-inset-top)); opacity: 1; }
}

/* Уведомление о голе в мире */
.goal-notification-world {
    position: absolute; /* Теперь абсолютное позиционирование внутри #world */
    top: 0;
    left: 0;
    color: #ff3366;
    font-family: 'Chewy', cursive;
    font-size: 64px;
    z-index: 3000;
    pointer-events: none;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 20px rgba(255, 255, 255, 0.8);
    animation: goalPopWorld 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, fadeOutWorld 0.5s 2.5s forwards;
    text-transform: uppercase;
    white-space: nowrap;
}

@keyframes goalPopWorld {
    0% { opacity: 0; margin-top: 50px; }
    100% { opacity: 1; margin-top: 0px; }
}

@keyframes fadeOutWorld {
    0% { opacity: 1; margin-top: 0px; }
    100% { opacity: 0; margin-top: -50px; }
}

/* === СИСТЕМА ЭМОЦИЙ (ЭМОДЗИ) === */
.emoji-wheel-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: emojiFadeIn 0.2s ease-out;
}

@keyframes emojiFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.emoji-wheel {
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-item {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    border: 3px solid #ff9de2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.emoji-item:hover {
    transform: scale(1.2);
    background: #fff0f9;
}

.emoji-item:active {
    transform: scale(0.9);
}

.emoji-wheel-close {
    width: 60px;
    height: 60px;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
    z-index: 10;
    transition: transform 0.2s;
}

.emoji-wheel-close:active {
    transform: scale(0.9);
}

/* Анимированный эмодзи над игроком */
.floating-emoji {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 45px;
    pointer-events: none;
    z-index: 1000;
    animation: emojiPopup 3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 2px 5px rgba(0,0,0,0.2);
}

.floating-roll {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 15px;
    border-radius: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2), 0 0 20px rgba(255, 157, 226, 0.4);
    border: 2px solid #ff9de2;
    animation: rollPopup 5s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}

.roll-emoji {
    font-size: 28px;
}

.roll-number {
    font-size: 24px;
    font-weight: bold;
    color: #ff6b6b;
    font-family: 'Arial Rounded MT Bold', 'Helvetica', sans-serif;
}

@keyframes rollPopup {
    0% { transform: translate(-50%, 20px) scale(0); opacity: 0; }
    10% { transform: translate(-50%, 0) scale(1.2); opacity: 1; }
    15% { transform: translate(-50%, 0) scale(1); opacity: 1; }
    80% { transform: translate(-50%, -20px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -40px) scale(0.8); opacity: 0; }
}

@keyframes emojiPopup {
    0% { transform: translateX(-50%) scale(0) translateY(10px); opacity: 0; }
    15% { transform: translateX(-50%) scale(1.3) translateY(0); opacity: 1; }
    25% { transform: translateX(-50%) scale(1) translateY(-5px); opacity: 1; }
    80% { transform: translateX(-50%) scale(1) translateY(-30px); opacity: 1; }
    100% { transform: translateX(-50%) scale(0.5) translateY(-50px); opacity: 0; }
}

/* Кнопка открытия эмоций в UI */
#emoji-btn {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ff9de2, #bd93f9);
    border: 3px solid white;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    flex-shrink: 0;
}

#emoji-btn:active {
    transform: scale(0.9);
}#emoji-btn {
    pointer-events: auto !important;
    z-index: 500 !important;
}
.emoji-wheel-overlay {
    z-index: 9999 !important;
}
/* Центрирование кнопок действий */
#action-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    height: 50px; /* Фиксируем высоту, чтобы не прыгало */
}

/* Убеждаемся, что чат в свернутом состоянии имеет жесткий центр */
#chat-container.collapsed {
    margin: 0 auto; /* Принудительно центрируем по горизонтали */
}/* Аура для Салок */
.is-it .pony-sprite {
    filter: drop-shadow(0 0 10px #ff4757) drop-shadow(0 0 20px #ff0000) !important;
    animation: waterPulse 0.8s infinite alternate !important;
}

@keyframes waterPulse {
    from { filter: drop-shadow(0 0 5px #ff4757) drop-shadow(0 0 10px #ff0000); }
    to { filter: drop-shadow(0 0 15px #ff4757) drop-shadow(0 0 30px red); }
}

/* Аура скорости от Золотого Яблока */
.speed-boost {
    filter: drop-shadow(0 0 15px gold) drop-shadow(0 0 30px rgba(255, 215, 0, 0.8)) !important;
    animation: speedPulse 1s infinite alternate;
}

@keyframes speedPulse {
    from { filter: drop-shadow(0 0 15px gold) drop-shadow(0 0 30px rgba(255, 215, 0, 0.5)); }
    to { filter: drop-shadow(0 0 20px gold) drop-shadow(0 0 40px rgba(255, 215, 0, 0.9)); }
}

#weather-canvas, #time-overlay, #fog-overlay {
    pointer-events: none !important;
}

.prop {
    pointer-events: auto !important;
}