From a064a6774aa39f5c00eaaa689b0fab5edda9b3aa Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Mon, 27 Apr 2026 00:48:07 +0700
Subject: [PATCH] =?UTF-8?q?style(player):=20cross-hatch=20=E2=9C=9A?=
 =?UTF-8?q?=E2=9C=9A=E2=9C=9A=20flanks=20around=20section=20label=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Each label now renders as: [hatch fill] [padding] [LABEL] [padding]
[hatch fill]. Flex layout with ::before/::after pseudo-elements
filling the remaining width. Matches the BAMBOORAFT physical card's
✚✚✚✚ TÂN TÂN ✚✚✚✚ band; 12px horizontal padding around the text
keeps the label readable.
---
 src/app.css | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4d4c1ab..b6bb2a0 100644
--- a/src/app.css
+++ b/src/app.css
@@ -63,15 +63,32 @@ body {
 }
 
 .section-label {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   font-size: 0.75rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   font-weight: 700;
-  padding: 6px 0;
+  padding: 6px 12px;
   color: #1565c0;
   background-color: rgb(227 242 253 / 0.6);
   font-style: italic;
+  white-space: nowrap;
+}
+/* Cross-hatch ✚✚✚ flanks on both sides of the label text — flex:1 fills
+   the remaining width so the text stays centered with comfy padding. */
+.section-label::before,
+.section-label::after {
+  content: "";
+  flex: 1;
+  height: 8px;
+  background-image: repeating-linear-gradient(
+    90deg,
+    transparent 0 6px,
+    #1e88e5 6px 8px,
+    transparent 8px 14px
+  );
 }
 @media (prefers-color-scheme: dark) {
   .section-label {