fix faction details that get cutoff

app.js

@@ -797,6 +797,41 @@ function toggleBenefitsTooltip(event) {
 
     // Toggle this tooltip
     tooltip.classList.toggle('show');
+
+    if (tooltip.classList.contains('show')) {
+        positionBenefitsTooltip(tooltip, icon);
+    }
+}
+
+function positionBenefitsTooltip(tooltip, icon) {
+    const margin = 12;
+    const maxWidth = Math.min(400, window.innerWidth - margin * 2);
+
+    tooltip.style.width = `${maxWidth}px`;
+    tooltip.style.left = '50%';
+    tooltip.style.right = 'auto';
+    tooltip.style.transform = 'translateX(-50%)';
+
+    let tooltipRect = tooltip.getBoundingClientRect();
+    const iconRect = icon.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+
+    if (tooltipRect.right > viewportWidth - margin) {
+        const shiftLeft = tooltipRect.right - (viewportWidth - margin);
+        tooltip.style.transform = `translateX(calc(-50% - ${shiftLeft}px))`;
+    } else if (tooltipRect.left < margin) {
+        const shiftRight = margin - tooltipRect.left;
+        tooltip.style.transform = `translateX(calc(-50% + ${shiftRight}px))`;
+    }
+
+    // Re-measure after shifting and align arrow to icon center
+    tooltipRect = tooltip.getBoundingClientRect();
+    const iconCenter = iconRect.left + iconRect.width / 2;
+    const arrowLeft = Math.min(
+        Math.max(iconCenter - tooltipRect.left, 16),
+        tooltipRect.width - 16
+    );
+    tooltip.style.setProperty('--tooltip-arrow-left', `${arrowLeft}px`);
 }
 
 // Close tooltips when clicking outside

styles.css

@@ -440,7 +440,7 @@ body {
     content: '';
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    left: var(--tooltip-arrow-left, 50%);
     transform: translateX(-50%);
     border: 8px solid transparent;
     border-bottom-color: #8b4513;
@@ -450,7 +450,7 @@ body {
     content: '';
     position: absolute;
     bottom: 100%;
-    left: 50%;
+    left: var(--tooltip-arrow-left, 50%);
     transform: translateX(-50%);
     border: 6px solid transparent;
     border-bottom-color: #fff;