diff --git a/src/static_src/scss/_note.scss b/src/static_src/scss/_note.scss
index 9c4a20c..e2c0b45 100644
--- a/src/static_src/scss/_note.scss
+++ b/src/static_src/scss/_note.scss
@@ -1,6 +1,22 @@
-// ── Note banner (slides in below page h2 after unlock) ─────────────────────
+// ── Note banner (Brief portal) ─────────────────────────────────────────────
+// Portals over the page wordmark + h2 header area when shown — `position:
+// fixed` w. `z-index: 10000` lifts it above every game overlay (gate /
+// role-select / sig / sky backdrops at z 100-200, tray at 310, kit bag at
+// 318+, etc.) the same way `#id_guard_portal` does. Without this lift the
+// Brief would land in document flow inside `.container` (after the
+// `#id_brief_banner_anchor` div) and disappear behind any `position: fixed`
+// overlay that sat above it in the z-stack — e.g. on room.html the gate
+// overlay's Gaussian-blur backdrop ate the Brief alive.
 
 .note-banner {
+    position: fixed;
+    top: 0.5rem;
+    left: 0.5rem;
+    right: 0.5rem;
+    z-index: 10000;
+    max-width: 960px;       // match `.container` max-width so wide viewports
+    margin-left: auto;      // see the Brief centred above the page rather
+    margin-right: auto;     // than stretched across landscape sidebars
     display: flex;
     align-items: center;
     gap: 0.75rem;
@@ -9,7 +25,6 @@
     backdrop-filter: blur(8px);
     border: 0.1rem solid rgba(var(--secUser), 0.4);
     border-radius: 0.5rem;
-    margin-bottom: 0.75rem;
 
     .note-banner__body {
         flex: 1;