update score css

style.css

@@ -56,6 +56,18 @@ h1 {
     font-weight: 700;
 }
 
+.scores {
+    display: flex;
+    gap: 16px;
+    font-weight: 600;
+    margin: 0 auto 0 24px;
+}
+
+.score-display span {
+    color: var(--accent-color);
+    font-weight: 700;
+}
+
 .controls {
     display: flex;
     gap: 8px;
@@ -266,7 +278,6 @@ h1 {
     50% { transform: translateY(-12px); }
 }
 
-/* ADDED: Styles for the new modal */
 .modal {
     position: fixed;
     inset: 0;
@@ -322,27 +333,21 @@ h1 {
     border-radius: 8px;
     cursor: pointer;
     border: 3px solid transparent;
-    transition: border-color 0.2s ease, transform 0.2s ease;
+    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
     position: relative;
     overflow: hidden;
 }
 .back-option .card-face--back { border: none; }
-.back-option.active, .back-option:hover { border-color: var(--glow); }
-/* Highlight the selected card back */
-
-
-.back-option.active {
-    border: 3px solid var(--glow);
-    box-shadow: 0 0 14px 4px var(--glow);
-    transform: scale(1.08);
-    z-index: 2;
-}
-
-/* Still allow hover effect, but don't override active */
 .back-option:hover {
     border-color: var(--glow);
-    box-shadow: 0 0 10px 2px var(--glow);
     transform: scale(1.05);
+    z-index: 1;
+}
+.back-option.active {
+    border-color: var(--glow);
+    transform: scale(1.08);
+    box-shadow: 0 0 12px 2px var(--glow);
+    z-index: 2;
 }
 
 /* --- CSS Card Backs --- */
@@ -367,97 +372,53 @@ body.card-back-nordic .card .card-face--back,
 .back-option.card-back-nordic .card-face--back {
     background-color: #2b2d42; background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 1px), linear-gradient(90deg, hsla(0,0%,100%,.3) 1px, transparent 1px); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; border-color: #1e1f2e;
 }
-
 body.card-back-midnight .card .card-face--back,
 .back-option.card-back-midnight .card-face--back {
-    background-color: #121212;
+    background-color: #121212; background-image: linear-gradient(#ffffff20 1px, transparent 1px), linear-gradient(90deg, #ffffff20 1px, transparent 1px); background-size: 22px 22px; border-color: #1e1e1e;
-    background-image: 
-        linear-gradient(#ffffff20 1px, transparent 1px),
-        linear-gradient(90deg, #ffffff20 1px, transparent 1px);
-    background-size: 22px 22px;
-    border-color: #1e1e1e;
 }
-
 body.card-back-diamond .card .card-face--back,
 .back-option.card-back-diamond .card-face--back {
-    background-color: #f8f8f8;
+    background-color: #f8f8f8; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 28px 28px; background-position: 0 0, 0 14px, 14px -14px, -14px 0px; border-color: #c2c2c2;
-    background-image:
-        linear-gradient(45deg, #ddd 25%, transparent 25%),
-        linear-gradient(-45deg, #ddd 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #ddd 75%),
-        linear-gradient(-45deg, transparent 75%, #ddd 75%);
-    background-size: 28px 28px;
-    background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
-    border-color: #c2c2c2;
 }
-
 body.card-back-royal .card .card-face--back,
 .back-option.card-back-royal .card-face--back {
-    background: repeating-linear-gradient(
+    background: repeating-linear-gradient(45deg, #224488, #224488 12px, #2c5ab0 12px, #2c5ab0 24px); border-color: #1b3561;
-        45deg,
-        #224488,
-        #224488 12px,
-        #2c5ab0 12px,
-        #2c5ab0 24px
-    );
-    border-color: #1b3561;
 }
-
 body.card-back-fade .card .card-face--back,
 .back-option.card-back-fade .card-face--back {
-    background: linear-gradient(160deg, #2c3e50, #34495e, #2c3e50);
+    background: linear-gradient(160deg, #2c3e50, #34495e, #2c3e50); border: 1px solid #1a242f;
-    border: 1px solid #1a242f;
-}
-
-body.card-back-midnight .card .card-face--back,
-.back-option.card-back-midnight .card-face--back {
-    background-color: #121212;
-    background-image: 
-        linear-gradient(#ffffff20 1px, transparent 1px),
-        linear-gradient(90deg, #ffffff20 1px, transparent 1px);
-    background-size: 22px 22px;
-    border-color: #1e1e1e;
-}
-
-body.card-back-diamond .card .card-face--back,
-.back-option.card-back-diamond .card-face--back {
-    background-color: #f8f8f8;
-    background-image:
-        linear-gradient(45deg, #ddd 25%, transparent 25%),
-        linear-gradient(-45deg, #ddd 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #ddd 75%),
-        linear-gradient(-45deg, transparent 75%, #ddd 75%);
-    background-size: 28px 28px;
-    background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
-    border-color: #c2c2c2;
-}
-
-body.card-back-royal .card .card-face--back,
-.back-option.card-back-royal .card-face--back {
-    background: repeating-linear-gradient(
-        45deg,
-        #224488,
-        #224488 12px,
-        #2c5ab0 12px,
-        #2c5ab0 24px
-    );
-    border-color: #1b3561;
-}
-
-body.card-back-fade .card .card-face--back,
-.back-option.card-back-fade .card-face--back {
-    background: linear-gradient(160deg, #2c3e50, #34495e, #2c3e50);
-    border: 1px solid #1a242f;
 }
 
 /* =================================== */
 /* ======= RESPONSIVE STYLES ======= */
 /* =================================== */
 
+/* For Mobile Top Bar (anything below 768px wide) */
+@media (max-width: 768px) {
+    .topbar {
+        justify-content: center; /* Center the items that wrap */
+        padding-bottom: 16px;
+    }
+    .topbar h1 {
+        width: 100%;
+        text-align: center;
+        margin-bottom: 8px; /* Add space below title */
+    }
+    .scores {
+        order: 3; /* Move scores below controls */
+        width: 100%;
+        justify-content: center;
+        margin: 8px 0 0 0; /* Center it with top margin */
+    }
+    .controls {
+        order: 2; /* Keep controls above scores */
+        justify-content: center;
+    }
+}
+
 /* For Mobile Screens (anything below 600px wide) */
 @media (max-width: 600px) {
     .foundations {
-        /* This brings the four foundation piles closer together */
         gap: 5px;
     }
 }
@@ -465,7 +426,6 @@ body.card-back-fade .card .card-face--back,
 /* For Tablets (screens 768px and wider) */
 @media (min-width: 768px) {
     :root {
-        /* Increase the minimum card size for tablets */
         --card-width: max(7vmin, 75px);
     }
 }
@@ -473,9 +433,6 @@ body.card-back-fade .card .card-face--back,
 /* For Laptops & Desktops (screens 1024px and wider) */
 @media (min-width: 1024px) {
     :root {
-        /* Further increase the minimum card size for large screens */
         --card-width: max(7.5vmin, 90px);
     }
 }
-
-