fix(magic8ball): shrink text and widen triangle viewport for long answers

- Reduce font size: 8px mobile / 10px desktop
- Tighten padding and max-width for earlier line breaks
- Lower text with mt-5 for wider triangle area
- Widen triangle clip-path: 50% 12%, 94% 92%, 6% 92%

src/components/generators/Magic8BallGenerator.astro

@@ -58,7 +58,7 @@ const copiedLabel = isRu ? "Скопировано" : "Copied";
             <div
               id="m8b-triangle"
               class="w-28 h-28 sm:w-32 sm:h-32 flex items-center justify-center transition-all duration-300"
-              style="clip-path: polygon(50% 8%, 92% 92%, 8% 92%);"
+              style="clip-path: polygon(50% 12%, 94% 92%, 6% 92%);"
             >
               <!-- Inner blue surface -->
               <div
@@ -77,7 +77,7 @@ const copiedLabel = isRu ? "Скопировано" : "Copied";
               <!-- Answer Text -->
               <span
                 id="m8b-answer"
-                class="relative z-10 text-center text-[9px] sm:text-[11px] font-bold text-white leading-[1.15] px-3 sm:px-4 mt-3 max-w-[8rem] sm:max-w-[9rem] transition-opacity duration-200"
+                class="relative z-10 text-center text-[8px] sm:text-[10px] font-bold text-white leading-[1.15] px-2 sm:px-3 mt-5 max-w-[6rem] sm:max-w-[7rem] transition-opacity duration-200"
                 style="text-shadow: 0 1px 2px rgba(0,0,0,0.5); opacity: 1;"
               >
                 {clickToAsk}