fixing a bug with DOM usage

app.css

@@ -7,6 +7,8 @@
     --accent: #cc0000;
     --accent-dim: #e8d7d7;
     --border: #202020;
+    --warn: #9a5b00;
+    --warn-dim: #fbe8c6;
   }
   @media (prefers-color-scheme: dark) {
     :root {
@@ -17,6 +19,8 @@
       --accent: #ff5c5c;
       --accent-dim: #3a2626;
       --border: #4a4d52;
+      --warn: #ffb84d;
+      --warn-dim: #40300f;
     }
   }
   * { box-sizing: border-box; }
@@ -84,6 +88,10 @@
     outline: none;
     border-color: var(--accent);
   }
+  .slot input.char-freeze {
+    border-color: var(--warn);
+    box-shadow: 0 0 0 2px var(--warn-dim);
+  }
   .symbols {
     display: flex;
     gap: 0.2rem;
@@ -132,6 +140,16 @@
     color: var(--accent);
     font-size: 0.95rem;
   }
+  .encounter--freeze {
+    border-color: var(--warn);
+    background: var(--warn-dim);
+  }
+  .freeze-warning {
+    color: var(--warn);
+    font-weight: bold;
+    font-size: 0.75rem;
+    margin-top: 0.35rem;
+  }
   h2 {
     font-size: 1rem;
     margin: 0 0 0.5rem;