fix(frontend): converge scenario 2601 legacy UI

app/game-frontend/src/components/chief/ChiefTurnCard.vue

@@ -26,6 +26,10 @@ const emit = defineEmits<{
 }>();
 
 const nameColor = computed(() => (props.npcState !== null ? getNpcColor(props.npcState) : undefined));
+const displayName = computed(() => {
+    const name = props.name ?? '-';
+    return (props.npcState ?? 0) > 0 && !/^[ⓜⓝ]/u.test(name) ? `ⓝ${name}` : name;
+});
 
 const handleClick = () => {
     if (props.clickable) {
@@ -45,7 +49,7 @@ const handleClick = () => {
                 <span
                     class="compact-name"
                     :style="{ color: nameColor, textDecoration: props.isMe ? 'underline' : undefined }"
-                    >{{ props.name ?? '-' }}</span
+                    >{{ displayName }}</span
                 >
                 <span class="compact-meta"
                     ><span>{{ props.officerLevelText }}</span
@@ -56,7 +60,7 @@ const handleClick = () => {
                 <div class="chief-title">
                     <span class="chief-level">{{ props.officerLevelText }}</span>
                     <span class="chief-name" :style="{ color: nameColor }">
-                        {{ props.name ?? '-' }}
+                        {{ displayName }}
                     </span>
                 </div>
                 <span v-if="props.isMe" class="chief-me">ME</span>

app/game-frontend/src/components/main/MainMobileBottomBar.vue

@@ -55,7 +55,7 @@ const onQuick = (item: QuickNavigationItem) => {
                 외부 메뉴
                 <span class="dropup-caret" aria-hidden="true"></span>
             </button>
-            <ul v-show="openId === 'global'" id="mobile-global-menu" class="bottom-popup" role="menu">
+            <ul v-if="openId === 'global'" id="mobile-global-menu" class="bottom-popup" role="menu">
                 <template v-for="entry in globalEntries" :key="entry.id">
                     <li v-if="entry.kind === 'link'" role="none">
                         <MainNavigationLink
@@ -122,7 +122,7 @@ const onQuick = (item: QuickNavigationItem) => {
                 국가 메뉴
                 <span class="dropup-caret" aria-hidden="true"></span>
             </button>
-            <ul v-show="openId === 'nation'" id="mobile-nation-menu" class="bottom-popup" role="menu">
+            <ul v-if="openId === 'nation'" id="mobile-nation-menu" class="bottom-popup" role="menu">
                 <template v-for="entry in nationNavigation" :key="entry.id">
                     <li v-if="entry.kind === 'link'" role="none">
                         <MainNavigationLink
@@ -163,7 +163,7 @@ const onQuick = (item: QuickNavigationItem) => {
                 빠른 이동
                 <span class="dropup-caret" aria-hidden="true"></span>
             </button>
-            <ul v-show="openId === 'quick'" id="mobile-quick-menu" class="bottom-popup" role="menu">
+            <ul v-if="openId === 'quick'" id="mobile-quick-menu" class="bottom-popup" role="menu">
                 <template v-for="item in quickNavigation" :key="item.id">
                     <template v-if="'kind' in item">
                         <li class="bottom-heading" role="presentation">{{ item.label }}</li>

app/game-frontend/src/components/main/MessagePanel.vue

@@ -426,6 +426,7 @@ const forwardResponse = (messageId: number, response: boolean) => {
     }
 
     .MessageList {
+        height: 650px;
         overflow-y: auto;
     }
 }

app/game-frontend/src/components/tournament/TournamentBracket.vue

@@ -14,6 +14,8 @@ const props = defineProps<{
     winnerId?: number;
     betTotals?: Record<number, number>;
     totalBet: number;
+    forceDesktop?: boolean;
+    showLegend?: boolean;
 }>();
 
 const bracket = computed(() => buildTournamentBracket(props.participants, props.matches, props.winnerId));
@@ -68,7 +70,18 @@ const odds = (id: number | null) => {
 </script>
 
 <template>
-    <section class="tournament-bracket" aria-label="토너먼트 대진표" tabindex="0">
+    <section
+        class="tournament-bracket"
+        :class="{ 'force-desktop': forceDesktop }"
+        aria-label="토너먼트 대진표"
+        tabindex="0"
+    >
+        <span class="legacy-connector-text">
+            ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+            ┏━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓
+            ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━━━━━━┻━━━━━━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓
+            ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓ ┏━━━━┻━━━━┓
+        </span>
         <div class="bracket-canvas">
             <div class="bracket-round bracket-champion" style="--slot-count: 1">
                 <span
@@ -176,7 +189,9 @@ const odds = (id: number | null) => {
                 </span>
             </template>
         </div>
-        <p>배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.</p>
+        <p v-if="showLegend !== false">
+            배당률이 낮을수록 베팅된 금액이 많고 유저들이 우승후보로 많이 선택한 장수입니다.
+        </p>
     </section>
 </template>
 
@@ -186,6 +201,14 @@ const odds = (id: number | null) => {
     padding: 10px 0;
     scrollbar-color: #777 #24140e;
 }
+.legacy-connector-text {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+}
 .bracket-canvas {
     width: 2000px;
     min-width: 2000px;
@@ -308,5 +331,16 @@ const odds = (id: number | null) => {
     .mobile-bracket {
         display: block;
     }
+    .tournament-bracket.force-desktop {
+        width: auto;
+        max-width: none;
+        overflow-x: auto;
+    }
+    .tournament-bracket.force-desktop .bracket-canvas {
+        display: block;
+    }
+    .tournament-bracket.force-desktop .mobile-bracket {
+        display: none;
+    }
 }
 </style>