From ec0a3b0ee1cc38ceac4ab06c2112161ba67d6070 Mon Sep 17 00:00:00 2001
From: Henri Bourcereau <henri.bourcereau@gmail.com>
Date: Tue, 5 May 2026 21:04:13 +0200
Subject: [PATCH] feat(web client): replace fields highlights by base
 indicators

---
 clients/web/assets/style.css | 69 +++++++++++++++++++++++++++++++++---
 1 file changed, 64 insertions(+), 5 deletions(-)

diff --git a/clients/web/assets/style.css b/clients/web/assets/style.css
index 31d1fe1..35d4eee 100644
--- a/clients/web/assets/style.css
+++ b/clients/web/assets/style.css
@@ -1526,13 +1526,72 @@ a:hover { text-decoration: underline; }
 
 .field.clickable {
     cursor: pointer;
-    --fc: #8fc840 !important;
 }
-.field.clickable:hover { --fc: #74aa28 !important; }
+.field.clickable:hover {
+    --fc: rgba(200,170,50,0.18) !important;
+}
 .field.selected {
-    --fc: #5a8a18 !important;
-    outline: 2px solid rgba(255,255,255,0.3);
-    outline-offset: -2px;
+    /* natural triangle color; tab is the indicator */
+}
+
+/* ── Tab indicators: small markers at the field's wide base ──────── */
+/* Bot-row: tabs hang below; top-row: tabs hang above.                */
+/* The tab sits at ≈ -6px which lands on the board's wooden rail.     */
+
+.field.clickable::after,
+.field.selected::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 22px;
+    height: 8px;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.bot-row .field.clickable::after,
+.bot-row .field.selected::after {
+    bottom: -6px;
+    top: auto;
+    border-radius: 0 0 10px 10px;
+}
+.top-row .field.clickable::after,
+.top-row .field.selected::after {
+    top: -6px;
+    bottom: auto;
+    border-radius: 10px 10px 0 0;
+}
+
+/* Possible origin: hollow gold outline */
+.field.clickable:not(.dest):not(.selected)::after {
+    background: rgba(210,170,30,0.15);
+    border: 1.5px solid rgba(210,170,30,0.75);
+    box-shadow: 0 0 4px rgba(210,170,30,0.3);
+}
+
+/* Selected origin: filled amber, breathing glow */
+.field.selected::after {
+    background: linear-gradient(to bottom, #e8b020, #c07808);
+    border: 1px solid rgba(255,225,65,0.55);
+    animation: tab-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes tab-pulse {
+    0%, 100% { box-shadow: 0 0 5px rgba(220,155,15,0.55), 0 0 2px rgba(255,220,50,0.3); }
+    50%       { box-shadow: 0 0 13px rgba(240,178,22,0.88), 0 0 6px rgba(255,230,60,0.6); }
+}
+
+/* Valid destination: soft ivory/pearl */
+.field.clickable.dest:not(.selected)::after {
+    background: rgba(240,230,205,0.88);
+    border: 1.5px solid rgba(190,165,105,0.65);
+    box-shadow: 0 0 3px rgba(190,165,105,0.2);
+}
+.field.clickable.dest:not(.selected):hover::after {
+    background: rgba(228,210,162,0.95);
+    border-color: rgba(210,175,40,0.72);
+    box-shadow: 0 0 7px rgba(210,175,40,0.42);
 }
 
 .field-num {