room.html burger btn + 5-fan; universal landscape btn refactor; kit_bag_dialog vertical bar — TDD

Major feature push staging room.html for sprint A.8 — adds the burger btn + fan-of-five sub-btns affordance, then rotates the whole landscape btn layout to make room for it. The landscape refactor is universal (not .room-page-scoped) so every page that hosts these btns reads consistently.

## Burger btn + fan-of-five (room.html only)

`templates/apps/gameboard/_partials/_room_burger.html` (NEW) — `#id_burger_btn` (.fa-burger) + `#id_burger_fan` containing 5 sub-btns: `#id_voice_btn` (headset), `#id_sky_btn` (cloud), `#id_earth_btn` (earth-americas), `#id_sea_btn` (bridge-water), `#id_text_btn` (keyboard). Pure scaffolding — no click handlers in this sprint; wire-up lands later as each surface matures.

`apps/epic/static/apps/epic/burger-btn.js` (NEW) — toggle `.active` on click; Escape + click-outside close; opening burger auto-closes the kit dialog (`#id_kit_bag_dialog`) + the bud slide-out panel (`html.bud-open`) by dispatching a click to the owning btn (routes through that btn's own toggle/close path — no fetch on close). `bindBurger()` returns an `AbortController` so test code (+ any future re-bind callers) can detach all listeners cleanly via `ac.abort()`.

`static_src/scss/_burger.scss` (NEW) — burger sits parallel to gear-above-kit but on the bud-side. Portrait: bottom:4.2rem; left:0.5rem (above #id_bud_btn). Landscape: bottom:0.5rem; right:4.2rem (to the LEFT of #id_bud_btn). Fan is a CSS radial menu w. each sub-btn's `--angle = --base + --i * 30deg`. Portrait `--base: 0deg` (arc 12→4 o'clock), landscape `--base: -90deg` (arc 9→1 o'clock). Sub-btn radius `--r: 7.75rem`. Indices: voice=0, sky=1, earth=2, sea=3, text=4 (user-spec'd clockwise order).

room.html includes the partial + the script; the burger renders unconditionally regardless of `gate_status` / `table_status`.

## Universal landscape btn refactor

Sprint replaces the prior centred-in-sidebar landscape arrangement w. a kit-at-top + bud-at-bottom + gear/burger as horizontal partners. Applies to every page in landscape (was scoped to .room-page in the first iteration).

`_game-kit.scss` — kit_btn landscape moves to top:0.5rem; right:0.5rem (was bottom:0.5rem centred in sidebar). The 0.5rem right literal (not the calc((--sidebar-w - 3rem)/2)=1rem) produces a 0.7rem edge-to-edge gap w. gear at right:4.2rem — matching the portrait gear-above-kit gap exactly.

`_bud.scss` — bud_btn landscape moves to bottom:0.5rem; right:0.5rem (was top:0.5rem centred in sidebar). Same 0.5rem literal as kit_btn. bud_panel #id_recipient relocates to bottom:0.5rem (was top:0.5rem) + transform-origin flips to right center. .bud-suggestions rise upward from above the panel (bottom:4rem) instead of dropping from below.

`_applets.scss` — .gear-btn landscape moves to top:0.5rem; right:4.2rem (was centred bottom:3.95rem). All applet menus anchor at top:2.6rem; right:4.2rem (beneath the gear's leftward arc) extending DOWN-LEFT into the viewport. #id_room_menu joins the shared portrait position list (was bespoke in _room.scss).

`_room.scss` — bespoke #id_room_menu rule deleted entirely. The menu now inherits %applet-menu + the shared portrait position list — same chrome + behaviour as #id_post_menu / #id_billscroll_menu. Earlier iteration tried flex-direction:row in landscape; reverted per user request — "lose all scss specificity" wins.

`_card-deck.scss` — obsolete `#id_room_menu { right: 2.5rem; }` override in the XL+landscape block deleted. Was a same-specificity hack to beat _applets.scss's old centred position; no longer needed w. the consolidated rule.

## kit_bag_dialog vertical bar in landscape

`_game-kit.scss` — when open in landscape, dialog covers the right sidebar (top:0; bottom:0; right:0; width: var(--sidebar-w)). Slides in from off-viewport right by animating max-width 0 → var(--sidebar-w). Opaque bg (rgba(--priUser, 1) — was 0.97). z-index: 319 (above burger at 318) so it lands in front of the burger btn when open. Top-edge border → left-edge border.

Inner content flips to `flex-direction: column-reverse` so DOM order Deck→Dice→Trinket→Tokens paints visually bottom→top. .kit-bag-section also column-reverse → icon row above label. .kit-bag-label drops vertical-rl + the rotate(180deg) scaleX(1.3) transform, reads horizontally. .kit-bag-row--scroll flips to column + overflow-y for the Tokens scrollable row.

`game-kit.js attachTooltip()` — 2-axis tooltip clamp matching sky-wheel.js + wallet.js's pattern. Horizontal: left edge stays within [1rem, viewport-ttW-1rem]. Vertical: prefer ABOVE the element; flip BELOW when tooltip is too tall to fit above (e.g. landscape kit bar w. Tokens row near top). Resets top/bottom on mouseleave so next show measures fresh.

## Tests

`apps/epic/tests/integrated/test_views.py` (+1 class, 6 ITs) — RoomBurgerBtnRenderTest: burger_btn renders, fan container renders, 5 sub-btns w. correct ids, icons match spec, burger-btn.js loaded, burger persists thru table_status.

`static_src/tests/BurgerSpec.js` (NEW, 19 Jasmine specs) — bindBurger() returns AbortController; click toggle; Escape close; click-outside close; opening burger closes kit dialog + bud panel when set; AbortController teardown removes listeners.

All 1356 IT+UT green (+6 new from RoomBurgerBtnRenderTest, was 1350). Jasmine suite green (was 220-something specs, +19 BurgerSpec).

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/static_src/scss/_game-kit.scss

@@ -3,15 +3,16 @@
     bottom: 0.5rem;
     right: 0.5rem;
 
-    // In landscape, centre the 3rem-wide btn within the var(--sidebar-w)
-    // footer sidebar — matches the bud-btn (bottom-left) + gear-btn (above
-    // kit-btn) formula. The clamp on the root rem means the sidebar scales
-    // fluidly, so this single rule covers all viewports without a per-
-    // breakpoint override.
+    // In landscape, kit btn relocates to the TOP of the right sidebar
+    // — anchored at right: 0.5rem (same as portrait), so the gear-to-the-
+    // LEFT-of-kit gap (in _applets.scss) reads as 0.7rem edge-to-edge,
+    // matching portrait's vertical gear-above-kit gap. Sidebar-centring
+    // via calc((--sidebar-w - 3rem) / 2) = 1rem would tighten that gap
+    // to 0.2rem, which reads visually wider than portrait.
     @media (orientation: landscape) {
-        right: calc((var(--sidebar-w) - 3rem) / 2);
-        bottom: 0.5rem;
-        top: auto;
+        right: 0.5rem;
+        top: 0.5rem;
+        bottom: auto;
     }
 
     z-index: 318;
@@ -47,16 +48,13 @@
     border: none;
     border-top: 0.1rem solid rgba(var(--quaUser), 1);
     background: rgba(var(--priUser), 0.97);
-    z-index: 316;
+    // Above the burger btn (z-318) so the dialog covers it when open in
+    // BOTH orientations — burger sits in the bottom-left corner in
+    // portrait + the right sidebar in landscape; the dialog lands atop.
+    z-index: 319;
     overflow: hidden;
 
-    @media (orientation: landscape) {
-        $sidebar-w: 4rem;
-        // left: $sidebar-w;
-        right: $sidebar-w;
-        z-index: 316;
-    }
-    // Closed state
+    // Closed state — portrait: grow from below the footer (max-height)
     max-height: 0;
     visibility: hidden;
     transition: max-height 0.25s ease-out, visibility 0s 0.25s;
@@ -71,6 +69,49 @@
         align-items: center;
         padding: 0.4rem 1rem;
     }
+
+    // In landscape, the dialog slides in from off-viewport to the RIGHT,
+    // landing ATOP the right sidebar (covers kit + gear + burger + bud
+    // when open). Full viewport height. Width matches sidebar-w so the
+    // closed→open width animation reads like the portrait grow-UPWARD-
+    // from-bottom rotated 90° — closed has zero width, open spans the
+    // sidebar column from right edge inward.
+    @media (orientation: landscape) {
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: auto;
+        width: var(--sidebar-w);
+        height: auto;
+
+        // Opaque in landscape — the dialog covers the sidebar btns + the
+        // burger + bud area when open; transparency would let those btns
+        // bleed through the dialog content.
+        background: rgba(var(--priUser), 1);
+
+        // Closed state — width animates from 0 (grows leftward from right)
+        max-width: 0;
+        max-height: none;
+        transition: max-width 0.25s ease-out, visibility 0s 0.25s;
+
+        // Top-edge accent → left-edge accent (border on the aperture-facing side)
+        border-top: none;
+        border-left: 0.1rem solid rgba(var(--quaUser), 1);
+
+        &[open] {
+            max-width: var(--sidebar-w);
+            max-height: none;
+            transition: max-width 0.25s ease-out, visibility 0s;
+            display: flex !important;
+            // DOM order is Deck→Dice→Trinket→Tokens; column-reverse paints
+            // them visually bottom→top so Deck rests at the bottom of the
+            // bar and Tokens at the top.
+            flex-direction: column-reverse;
+            gap: 1rem;
+            align-items: center;
+            padding: 1rem 0.25rem;
+        }
+    }
 }
 
 .kit-bag-section {
@@ -79,6 +120,14 @@
     align-items: center;
     gap: 0.5rem;
     flex-shrink: 0;
+
+    // Landscape — stack icon row ABOVE label. DOM order is label → row;
+    // column-reverse paints row at top + label at bottom (icon above title).
+    @media (orientation: landscape) {
+        flex-direction: column-reverse;
+        align-items: center;
+        gap: 0.25rem;
+    }
 }
 
 .kit-bag-label {
@@ -92,6 +141,17 @@
     text-orientation: mixed;
     transform: rotate(180deg) scaleX(1.3);
     padding: 0 0.25rem 0 0.5rem;
+
+    // Landscape — undo vertical writing-mode + rotation; label reads
+    // horizontally beneath its icon in the column-reverse section.
+    @media (orientation: landscape) {
+        writing-mode: horizontal-tb;
+        text-orientation: mixed;
+        transform: none;
+        padding: 0;
+        font-size: 0.5rem;
+        text-align: center;
+    }
 }
 
 .kit-bag-row {
@@ -156,6 +216,14 @@
     flex-wrap: nowrap;
     scrollbar-width: none;
     &::-webkit-scrollbar { display: none; }
+
+    // Landscape — the dialog runs vertically, so the Tokens row also
+    // flips to a vertical column + scrolls along the y-axis instead.
+    @media (orientation: landscape) {
+        flex-direction: column;
+        overflow-x: visible;
+        overflow-y: auto;
+    }
 }
 
 .kit-bag-empty {