Add "In Development" watermark badge over AI virus artwork

Overlay a rotated CSS badge on the homepage hero and briefing page
image instead of baking it into the PNG, so it's easy to remove once
the game ships.

templates/website/home/index.html.twig

@@ -22,6 +22,28 @@
             0%, 100% { opacity: 1; }
             50% { opacity: .35; }
         }
+        .dev-watermark-wrap {
+            position: relative;
+            display: inline-block;
+        }
+        .dev-watermark-badge {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-12deg);
+            background: rgba(220, 53, 69, .85);
+            color: #fff;
+            font-weight: 800;
+            letter-spacing: .12em;
+            text-transform: uppercase;
+            padding: .35rem 1.25rem;
+            border: 2px solid rgba(255, 255, 255, .85);
+            border-radius: .25rem;
+            font-size: .9rem;
+            white-space: nowrap;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
+            pointer-events: none;
+        }
     </style>
 {% endblock %}
 
@@ -42,7 +64,10 @@
             </div>
         </div>
         <div class="col-lg-5 text-center">
+            <div class="dev-watermark-wrap">
                 <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 260px;">
+                <span class="dev-watermark-badge">In Development</span>
+            </div>
         </div>
     </div>
 </div>

templates/website/home/intro.html.twig

@@ -30,6 +30,28 @@
             color: var(--brand-teal-light, #6fb8d1);
             padding-right: .1em;
         }
+        .dev-watermark-wrap {
+            position: relative;
+            display: inline-block;
+        }
+        .dev-watermark-badge {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) rotate(-12deg);
+            background: rgba(220, 53, 69, .85);
+            color: #fff;
+            font-weight: 800;
+            letter-spacing: .12em;
+            text-transform: uppercase;
+            padding: .35rem 1.25rem;
+            border: 2px solid rgba(255, 255, 255, .85);
+            border-radius: .25rem;
+            font-size: .9rem;
+            white-space: nowrap;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
+            pointer-events: none;
+        }
     </style>
 {% endblock %}
 
@@ -46,7 +68,10 @@
             </div>
 
             <div class="text-center mb-4">
+                <div class="dev-watermark-wrap">
                     <img src="{{ asset('images/AI_virus.png') }}" alt="AI Virus" class="img-fluid" style="max-height: 220px;">
+                    <span class="dev-watermark-badge">In Development</span>
+                </div>
             </div>
 
             <div class="briefing-body">