diff --git a/frontend/pet.html b/frontend/pet.html
index 628876b..373ff3f 100644
--- a/frontend/pet.html
+++ b/frontend/pet.html
@@ -333,13 +333,14 @@
     .wr-modal-close:hover { background:rgba(255,255,255,.12); color:var(--text); }
     .wr-modal-body { display:grid; grid-template-columns:252px 1fr; gap:24px; align-items:start; }
     .wr-modal-preview { display:flex; flex-direction:column; align-items:center; gap:11px; position:sticky; top:0; }
-    .wr-prev-scene { width:100%; aspect-ratio:1; border-radius:20px; display:grid; place-items:center; position:relative; overflow:hidden;
+    .wr-prev-scene { width:100%; aspect-ratio:1; border-radius:20px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;
                      border:1.5px solid rgba(155,93,229,.18); background:linear-gradient(155deg,#0d0d1f,#1a1040);
                      box-shadow:inset 0 -34px 58px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.04); }
     .wr-prev-scene::after { content:''; position:absolute; inset:0; pointer-events:none;
                             background:radial-gradient(ellipse at 50% 94%, rgba(0,0,0,.4), transparent 58%); }
-    .wr-prev-scene svg { width:86%; height:86%; position:relative; z-index:1; filter:drop-shadow(0 10px 16px rgba(0,0,0,.4));
-                         animation:wrFloat 3.6s ease-in-out infinite; }
+    #wr-preview-svg { width:82%; position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
+                      animation:wrFloat 3.6s ease-in-out infinite; }
+    #wr-preview-svg svg { width:100%; height:auto; display:block; filter:drop-shadow(0 9px 15px rgba(0,0,0,.4)); }
     @keyframes wrFloat { 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
     .wr-prev-name { font-family:'Unbounded',sans-serif; font-weight:800; font-size:1.02rem; }
     .wr-prev-evo { font-size:.68rem; font-weight:700; color:var(--text-2); background:rgba(155,93,229,.14);