v0.13.3 account delete api and web client update for it

internal/server/webserver/chess-client-web/style.css

@@ -490,6 +490,16 @@ main {
     transform: translateY(-1px);
 }
 
+.btn-danger {
+    background: var(--tokyo-red);
+    color: var(--host-bg);
+}
+
+.btn-danger:hover:not(:disabled) {
+    filter: brightness(1.1);
+    transform: translateY(-1px);
+}
+
 .btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
@@ -546,7 +556,15 @@ main {
 }
 
 .form-group .group-label {
-    text-align: center;
+    color: var(--tokyo-cyan);
+}
+
+/* Label and control on one line: the colour choice. */
+.form-group.form-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
 }
 
 .radio-group {
@@ -643,7 +661,8 @@ input[type="range"]::-webkit-slider-thumb {
 
 .auth-form input[type="text"],
 .auth-form input[type="email"],
-.auth-form input[type="password"] {
+.auth-form input[type="password"],
+.account-form input[type="password"] {
     width: 100%;
     padding: 0.5rem;
     background: var(--host-bg);
@@ -653,7 +672,8 @@ input[type="range"]::-webkit-slider-thumb {
     font-size: 0.9rem;
 }
 
-.auth-form input:focus {
+.auth-form input:focus,
+.account-form input:focus {
     outline: none;
     border-color: var(--host-royal);
 }
@@ -679,18 +699,29 @@ input[type="range"]::-webkit-slider-thumb {
     color: var(--tokyo-green);
 }
 
-/* --- Modal status message (Issue 2) --- */
+/* --- Modal status message ---
+   A reserved slot, not a block that appears: an empty message keeps its height
+   and is only invisible, so a message never moves the form or pushes the
+   buttons out of a short frame (the embedded board on lixen.com is one). Sized
+   for one line; a longer message wraps and grows the slot, which the modal's
+   own scroll absorbs. */
 .modal-message {
-    display: none;
-    margin-bottom: 1rem;
-    padding: 0.6rem 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.3rem;
+    margin-bottom: 0.75rem;
+    padding: 0.35rem 0.75rem;
+    border: 1px solid transparent;
     border-radius: 6px;
     font-size: 0.85rem;
+    line-height: 1.3;
     text-align: center;
+    visibility: hidden;
 }
 
 .modal-message.show {
-    display: block;
+    visibility: visible;
 }
 
 .modal-message.error {
@@ -706,7 +737,8 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 /* --- Disabled state while a modal request is in flight (Issue 1) --- */
-.auth-form input:disabled {
+.auth-form input:disabled,
+.account-form input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
@@ -956,6 +988,37 @@ input[type="range"]:disabled {
     text-shadow: 1px 1px 2px rgba(255,255,255,0.2);
 }
 
+/* Account */
+.account-modal {
+    max-width: 360px;
+}
+
+.account-name {
+    text-align: center;
+}
+
+.danger-zone {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--tokyo-border);
+}
+
+.danger-zone summary {
+    cursor: pointer;
+    color: var(--tokyo-red);
+    text-align: center;
+}
+
+.danger-zone p {
+    margin: 0.75rem 0 1rem;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+.danger-zone .modal-buttons {
+    margin-top: 1rem;
+}
+
 /* Resign confirmation */
 .confirm-modal {
     max-width: 320px;