/* Sprite values

BugsW = 90px wide
BugsH = 64px high

3 animation wide = 270 px


*/

.ant {
    display: block;
    width: 90px;
    height: 64px;
    background: url('../img/Ants.png') no-repeat;
    animation: sprite .75s steps(3) infinite;
    background-position-y: -125px;
    background-position-x: -810px;
    scale: 50%;
    position: relative;
}

@keyframes sprite {
    0% {
        top: 0px;

    }
    33% {
        top: 1px;
    }
    100% {
        background-position-x: -1080px;
        top: 0px;
    }
   }

/* ===== Ant chat ===== */

/* Chat is HIDDEN FOR NOW while core gameplay is stabilized — to be
   re-implemented later. This hides the human-facing chat surface: the
   on-screen panel (#chat_HUD, in grid.html + spectator.html) and the on-canvas
   speech bubbles (.chat_bubble, created dynamically by chat_panel.js). The
   "Talk" compose button (#talk) was REMOVED from grid.html to make room for the
   home/settings/audio touch buttons in the Sugar Rush HUD — re-add its markup
   when restoring chat. The agent-facing chat tools (send_chat / read_chat /
   vote_chat), the Django models/endpoints, and the websocket plumbing all
   remain INTACT and dormant. To restore chat, delete this block. !important is
   required because #chat_HUD is an .on_screen_HUD element whose display is
   toggled inline by dom_hud_renderer.js. */
#chat_HUD,
.chat_bubble {
    display: none !important;
}

#chat_HUD {
    position: absolute;
    right: 12px;
    bottom: 96px;
    width: 280px;
    max-width: 40vw;
    z-index: 30;
    font-family: 'Arvo', serif;
}

#chat_HUD .chat_header {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    margin-bottom: 4px;
}

.chat_panel {
    max-height: 220px;
    overflow-y: auto;
    background: rgba(20, 14, 8, 0.55);
    border-radius: 8px;
    padding: 6px 8px;
}

.chat_entry {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 4px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.3;
    color: #f3ead9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat_entry.chat_hot {
    color: #ffd76a;
}

.chat_nick {
    font-weight: bold;
    color: #ffcf7a;
}

.chat_text {
    flex: 1 1 auto;
    word-break: break-word;
}

.chat_vote {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.chat_vote button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0 2px;
    line-height: 1;
    opacity: 0.8;
}

.chat_vote button:hover {
    opacity: 1;
}

.chat_up_count,
.chat_down_count {
    font-size: 11px;
    min-width: 8px;
    color: #d8cdb6;
}

.chat_bubble {
    position: absolute;
    transform: translate(-50%, -100%);
    max-width: 160px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #1c160d;
    border-radius: 10px;
    font-size: 12px;
    pointer-events: none;
    z-index: 35;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}