From 74a235a4015f150328cfbd1f73967c27393f34e9 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 30 Apr 2026 21:48:50 +0700
Subject: [PATCH] revert(player): bring back the gradient cross-slash style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The SVG-line replacement from the gradient-cleanup refactor (commit
635a4c3) drew the slash on the main diagonal (top-left → bottom-right)
and stopped at the inset:6px box edge — visually disconnected from the
cell vertices. The original CSS gradient stripe goes corner-to-corner
of the inset box on the anti-diagonal (the natural slash direction
for Vietnamese lô tô), with a clip-path reveal animation that reads
as "drawing" the slash.

- Restore .cell-crossed / .cell-crossed-win pseudo classes
- Replace the inline <svg> markup with a single <span> + class
- Restore cross-draw keyframes (clip-path inset reveal)
- prefers-reduced-motion: keep slash drawn, drop the reveal animation
---
 web/src/app.css                | 42 +++++++++++++++++++++-------------
 web/src/lib/PlayerBoard.svelte | 14 +++---------
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index 19ea208..a3fceeb 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -171,8 +171,8 @@ body {
 .animate-toast { animation: toast 5s ease-in-out forwards; }
 
 @keyframes cross-draw {
-  from { stroke-dashoffset: 200; }
-  to   { stroke-dashoffset: 0; }
+  from { clip-path: inset(0 100% 0 0); }
+  to   { clip-path: inset(0 0 0 0); }
 }
 
 /* Falling-confetti burst for the 3rd-and-up bingo of a single card. */
@@ -191,24 +191,32 @@ body {
   will-change: transform, opacity;
 }
 
-/* Diagonal slash drawn as a true solid stroke via SVG. preserveAspectRatio
-   on the <svg> stretches the line to corner-to-corner regardless of cell
-   aspect ratio; vector-effect keeps the visual stroke width constant. */
-.cross-slash {
+/* Diagonal slash drawn via a CSS gradient stripe centered on the
+   anti-diagonal of the cell. Per-cell aspect ratio means the visible
+   line tracks naturally with the cell's diagonal regardless of mobile
+   vs sm+ aspect, and the inset keeps the slash off the cell edges so
+   adjacent cells don't blur into one continuous stripe. */
+.cell-crossed {
   position: absolute;
   inset: 6px;
   pointer-events: none;
-}
-.cross-slash-line {
-  stroke: #ef4444;
-  stroke-width: 3;
-  stroke-linecap: round;
-  stroke-dasharray: 200;
-  stroke-dashoffset: 0;
+  background-image: linear-gradient(
+    to bottom right,
+    transparent calc(50% - 1.5px),
+    #ef4444,
+    transparent calc(50% + 1.5px)
+  );
   animation: cross-draw 200ms ease-out;
 }
-.cross-slash-win .cross-slash-line {
-  stroke: #10b981;
+/* Winning-row slash uses emerald instead of red so a completed row
+   reads as "win" rather than "marked off". */
+.cell-crossed-win {
+  background-image: linear-gradient(
+    to bottom right,
+    transparent calc(50% - 1.5px),
+    #10b981,
+    transparent calc(50% + 1.5px)
+  );
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -219,7 +227,9 @@ body {
   .animate-spin-slow-reverse,
   .animate-toast,
   .confetti,
-  .cross-slash-line {
+  .cell-crossed {
     animation: none !important;
   }
+  /* Keep the slash visible (no draw animation, but still drawn). */
+  .cell-crossed { clip-path: none; }
 }
diff --git a/web/src/lib/PlayerBoard.svelte b/web/src/lib/PlayerBoard.svelte
index 017d71b..115b9a3 100644
--- a/web/src/lib/PlayerBoard.svelte
+++ b/web/src/lib/PlayerBoard.svelte
@@ -455,18 +455,10 @@
                   >
                     {num}
                     {#if isCrossed}
-                      <svg
+                      <span
                         aria-hidden="true"
-                        viewBox="0 0 100 100"
-                        preserveAspectRatio="none"
-                        class="cross-slash {rowComplete ? 'cross-slash-win' : ''}"
-                      >
-                        <line
-                          class="cross-slash-line"
-                          x1="0" y1="0" x2="100" y2="100"
-                          vector-effect="non-scaling-stroke"
-                        />
-                      </svg>
+                        class="cell-crossed {rowComplete ? 'cell-crossed-win' : ''}"
+                      ></span>
                     {/if}
                   </button>
                 {/if}