python-tdd/src/static_src/scss/_burger.scss

// ── Burger btn + fan-of-5 (room.html only) ───────────────────────────
//
// Sits parallel to .gear-btn-above-#id_kit_btn, but on the bud-side:
//   portrait : bottom-left, above #id_bud_btn
//   landscape: right sidebar, to the LEFT of #id_bud_btn (same horizontal
//              pair as gear ← kit at the top)
//
// Active state opens a fanning arc of 5 sub-btns 30deg apart, each
// centred --r from the burger centre. R=7.75rem reads as a comfortable
// spread w. ~0.4rem edge-to-edge gaps between adjacent sub-btns.
//   portrait : arc 12→4 o'clock (sky, earth, sea, voice, text)
//   landscape: arc 9→1 o'clock (same icon order, rotated CCW 90°)
//
// Sub-btns are pure scaffolding — no click handlers in this sprint.
//
// Landscape btn relocation rules for kit / gear / bud / kit_dialog / bud
// panel / applet menus DON'T live in this partial — they're owned by
// their respective `_game-kit.scss`, `_bud.scss`, `_applets.scss`,
// `_room.scss` partials. _burger.scss only owns burger-specific styling.

#id_burger_btn {
    position: fixed;
    bottom: 4.2rem;
    left: 0.5rem;
    z-index: 318;
    font-size: 1.75rem;
    cursor: pointer;
    color: rgba(var(--secUser), 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(var(--priUser), 1);
    border: 0.15rem solid rgba(var(--secUser), 1);
    transition: opacity 0.15s ease;

    &.active {
        color: rgba(var(--quaUser), 1);
        border-color: rgba(var(--quaUser), 1);
    }

    // Landscape: burger sits to the LEFT of #id_bud_btn (same bottom
    // anchor as bud). Mirrors gear-to-the-LEFT-of-kit at the top of the
    // right sidebar (see _applets.scss for the gear placement).
    @media (orientation: landscape) {
        left: auto;
        right: 4.2rem;        // bud_btn right (0.5) + 3.7rem centre-to-centre delta
        bottom: 0.5rem;
        top: auto;
    }
}

// Fan anchor — sits at the burger centre. Sub-btns inside translate
// outward radially when #id_burger_btn carries the .active class.
#id_burger_fan {
    position: fixed;
    bottom: 5.7rem;   // burger bottom (4.2) + half-btn (1.5)
    left: 2rem;       // burger left   (0.5) + half-btn (1.5)
    width: 0;
    height: 0;
    z-index: 317;     // below #id_burger_btn so the burger stays clickable
    pointer-events: none;

    @media (orientation: landscape) {
        left: auto;
        right: 5.7rem;        // burger right (4.2) + half-btn (1.5) → burger centre
        bottom: 2rem;         // burger bottom (0.5) + half-btn (1.5) → burger centre
        top: auto;
    }
}

.burger-fan-btn {
    --r: 7.75rem;
    --i: 0;
    --base: 0deg;      // portrait: arc starts at 12 o'clock
    --angle: calc(var(--base) + var(--i) * 30deg);

    position: absolute;
    left: -1.5rem;     // centre 3rem btn on parent's 0,0 origin
    top: -1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(var(--priUser), 1);
    border: 0.15rem solid rgba(var(--secUser), 1);
    color: rgba(var(--secUser), 1);
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    // Closed state — collapsed onto burger centre, invisible
    transform: rotate(var(--angle)) translateY(0) rotate(calc(-1 * var(--angle)));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease-out, opacity 0.2s ease;

    // Landscape: arc rotates CCW 90° — start at 9 o'clock instead of 12.
    @media (orientation: landscape) {
        --base: -90deg;
    }
}

// Per-btn arc index (clockwise from arc start) — voice leads, then sky,
// earth, sea, text. Portrait arc: voice at 12, text at 4 o'clock.
// Landscape arc: voice at 9, text at 1 o'clock.
#id_voice_btn { --i: 0; }
#id_sky_btn   { --i: 1; }
#id_earth_btn { --i: 2; }
#id_sea_btn   { --i: 3; }
#id_text_btn  { --i: 4; }

// Open state — sub-btns swing out to their arc positions.
#id_burger_btn.active ~ #id_burger_fan .burger-fan-btn {
    transform: rotate(var(--angle)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--angle)));
    opacity: 1;
    pointer-events: auto;
}