{# Burger btn + fan of 5 sub-btns. Sub-btns default to INACTIVE         #}
{# (opacity 0.6, fa-ban icon). When a condition flips a sub-btn to      #}
{# .active, the real icon (sky/earth/sea/voice/text) shows + opacity    #}
{# goes to 1. Each sub-btn renders BOTH icons; CSS hides one based on   #}
{# the .active class.                                                    #}
{#                                                                        #}
{# Active conditions are wired one-by-one in later sprints. For now all   #}
{# sub-btns are inactive; clicking an inactive sub-btn flashes a brief    #}
{# --priRd glow (twice, fast cadence) — burger-btn.js owns the delegated #}
{# click + flash.                                                         #}
<button id="id_burger_btn" type="button" aria-label="Open burger menu" aria-expanded="false"{% if sea_first_draw_pending %} class="glow-handoff"{% endif %}>
    <i class="fa-solid fa-burger"></i>
</button>
<div id="id_burger_fan" aria-hidden="true">
    {# Voice sub-btn (Phase C). .active when a 24h voice window is open      #}
    {# (owner w. a present invitee, or the present invitee). data-room-id    #}
    {# keys the WebRTC mesh group: mysea-<owner_id>. burger-btn.js binds the #}
    {# active-click → lazy-load voice-mesh.js → join / toggle-mute.          #}
    <button id="id_voice_btn" type="button" class="burger-fan-btn{% if voice_active %} active{% endif %}" aria-label="Voice"{% if voice_room_id %} data-room-id="{{ voice_room_id }}"{% endif %}>
        <i class="fa-solid fa-headset burger-fan-icon--on"></i>
        <i class="fa-solid fa-ban burger-fan-icon--off"></i>
    </button>
    <button id="id_sky_btn" type="button" class="burger-fan-btn" aria-label="Sky">
        <i class="fa-solid fa-cloud burger-fan-icon--on"></i>
        <i class="fa-solid fa-ban burger-fan-icon--off"></i>
    </button>
    <button id="id_earth_btn" type="button" class="burger-fan-btn" aria-label="Earth">
        <i class="fa-solid fa-earth-americas burger-fan-icon--on"></i>
        <i class="fa-solid fa-ban burger-fan-icon--off"></i>
    </button>
    <button id="id_sea_btn" type="button" class="burger-fan-btn{% if sea_btn_active %} active{% endif %}" aria-label="Sea">
        <i class="fa-solid fa-bridge-water burger-fan-icon--on"></i>
        <i class="fa-solid fa-ban burger-fan-icon--off"></i>
    </button>
    <button id="id_text_btn" type="button" class="burger-fan-btn" aria-label="Text">
        <i class="fa-solid fa-keyboard burger-fan-icon--on"></i>
        <i class="fa-solid fa-ban burger-fan-icon--off"></i>
    </button>
</div>