fix(frontend): restore Ref document and control contracts

Ref's `.bg0/.bg1/.bg2` set only a background image and `html, body` centre the
texture with vertical tiling, so the extra background colours and the default
tiling are removed. Two ranking views declared unscoped `body` rules that leaked
a 500px min-width and a 21px line-height onto every screen; each page now owns
its own contract. Controls that Ref renders with the Bootstrap/Lumen family get
the shared modifier so the bottom edge moves on hover and while pressed.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/game-frontend/src/views/NpcControlView.vue

@@ -558,9 +558,13 @@ const dropPriority = (event: DragEvent, section: PrioritySectionKey, bucket: Pri
 </template>
 
 <style scoped>
-:global(html),
-:global(body),
-:global(#app) {
+/*
+ * The document contract belongs to this page only. An unscoped html/body rule
+ * here leaked a 21px line-height and a 500px min-width onto every other screen.
+ */
+:global(html:has(#npc-policy-page)),
+:global(body:has(#npc-policy-page)),
+:global(#app:has(#npc-policy-page)) {
     min-width: 500px;
     margin: 0;
     background: #000;
@@ -569,11 +573,6 @@ const dropPriority = (event: DragEvent, section: PrioritySectionKey, bucket: Pri
     line-height: 21px;
 }
 
-:global(body:has(#npc-policy-page)) {
-    min-width: 500px;
-    line-height: 21px;
-}
-
 .npc-page {
     min-height: 100vh;
     padding-bottom: 32px;