style: melhora layout de quadrinhos com baloes mais compactos, enquadramento de camera afastado e numeracao de painel discreta

public/app.js

@@ -3748,7 +3748,7 @@ const initApp = () => {
           // Selo do número
           const badge = document.createElement('div');
           badge.className = 'comic-panel-number-badge';
-          badge.textContent = `Quadro ${panel.panel_number}`;
+          badge.textContent = panel.panel_number;
           imgContainer.appendChild(badge);
 
           // Balão de fala absoluto por cima se habilitado e houver diálogo

public/style.css

@@ -3180,31 +3180,35 @@ code {
 
 .comic-speech-bubble {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 8px;
+  left: 8px;
   background: white;
   border: 2px solid #1e293b;
-  border-radius: 12px;
-  padding: 6px 10px;
-  font-size: 0.78rem;
+  border-radius: 10px;
+  padding: 4px 8px;
+  font-size: 0.72rem;
   font-weight: 700;
   color: #0f172a;
-  max-width: 80%;
+  max-width: 65%;
   box-shadow: 2px 2px 0px rgba(30, 41, 59, 0.15);
   z-index: 10;
 }
 
 .comic-panel-number-badge {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 8px;
+  right: 8px;
   background: #fef08a; /* Amarelo claro */
   color: #1e293b;
   font-weight: 800;
   font-size: 0.8rem;
-  padding: 2px 6px;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   border: 2px solid #1e293b;
-  border-radius: 6px;
+  border-radius: 50%;
   z-index: 12;
   box-shadow: 1px 1px 0px #1e293b;
 }