Mejorar indicador de mismas cartas

src/components/carta.vue

@@ -179,13 +179,8 @@ export default defineComponent({
 .cont-carta
     margin-left: 1px
 
-.c-carta-resaltada
-    transform: translateY(calc(var(--phx) * -1))
-    filter: saturate(1.75) !important
-    opacity: 1 !important
 
 .c-carta
-    opacity: 0.95
     position: relative
     font:
         size: calc(var(--phx) * 4 * var(--escala))
@@ -218,7 +213,7 @@ export default defineComponent({
         top: -95%
         width: 100%
         height: 100%
-        background-image: linear-gradient(135deg, rgba(210, 210, 210, 0.0) 0%, rgba(210, 210, 210, 0.0) 45%, rgba(210, 210, 210, 0.3) 55%, rgba(210, 210, 210, 0.9) 63%, rgba(210, 210, 210, 0.3) 67%, rgba(210, 210, 210, 0.0) 75%, rgba(210, 210, 210, 0.0) 100%)
+        background-image: linear-gradient(135deg, rgba(169, 169, 169, 0.0) 0%, rgba(169, 169, 169, 0.0) 45%, rgba(169, 169, 169, 0.3) 55%, rgba(169, 169, 169, 0.9) 63%, rgba(169, 169, 169, 0.3) 67%, rgba(169, 169, 169, 0.0) 75%, rgba(169, 169, 169, 0.0) 100%)
         transition: transform 1000ms
         animation-duration: 4s
         animation-name: brillocarta
@@ -274,26 +269,47 @@ export default defineComponent({
     background-color: var(--color-fondo)
     color: var(--color-texto)
 
+.carta-cNegro.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-carta-negra) !important
+
 .carta-cRojo
     background-color: var(--color-fondo-carta-roja)
     color: var(--color-texto-carta-roja)
 
+.carta-cRojo.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-carta-roja) !important
+
 .carta-cReyes
     background-color: var(--color-fondo-reyes)
     color: var(--color-texto-reyes)
 
+.carta-cReyes.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-reyes) !important
+
 .carta-dNegro
     background-color: var(--color-fondo)
 
+.carta-dNegro.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-carta-negra) !important
+
 .carta-dRojo
     background-color: var(--color-fondo-dragon-rojo)
 
+.carta-dRojo.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-dragon-rojo) !important
+
 .carta-dVerde
     background-color: var(--color-fondo-dragon-verde)
 
+.carta-dVerde.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-dragon-verde) !important
+
 .carta-dAzul
     background-color: var(--color-fondo-dragon-azul)
 
+.carta-dAzul.c-carta-resaltada
+    background-color: var(--color-fondo-resaltado-dragon-azul) !important
+
 .carta-
     opacity: 0
 

src/styles/global.sass

@@ -4,8 +4,7 @@ body
   color: var(--color-texto)
   margin: 0
 
-// Claro
+@mixin tema-claro
-.tema-automatico
   --color-fondo: #ffffff
   --color-texto: #151515
   --color-fondo-transparente: rgba(255, 255, 255, 0.8)
@@ -18,26 +17,17 @@ body
   --color-fondo-reyes: #ffffff
   --color-texto-reyes: #2E7D32
 
-  --color-mesa-1: #E3F2FD
+  --color-fondo-resaltado-carta-roja: #64B5F6
-  --color-mesa-2: #90CAF9
+  --color-fondo-resaltado-carta-negra: #64B5F6
-
+  --color-fondo-resaltado-dragon-rojo: #64B5F6
-.tema-claro
+  --color-fondo-resaltado-dragon-verde: #64B5F6
-  --color-fondo: #ffffff
+  --color-fondo-resaltado-dragon-azul: #64B5F6
-  --color-texto: #151515
+  --color-fondo-resaltado-reyes: #64B5F6
-  --color-fondo-transparente: rgba(255, 255, 255, 0.8)
-  --color-borde: gray
-  --color-texto-carta-roja: #b71c1c
-  --color-fondo-carta-roja: #ffffff
-  --color-fondo-dragon-rojo: #ffffff
-  --color-fondo-dragon-verde: #ffffff
-  --color-fondo-dragon-azul: #ffffff
-  --color-fondo-reyes: #ffffff
-  --color-texto-reyes: #2E7D32
 
   --color-mesa-1: #E3F2FD
   --color-mesa-2: #90CAF9
 
-.tema-oscuro
+@mixin tema-oscuro
   --color-fondo: #151515
   --color-texto: #dedede
   --color-fondo-transparente: rgba(21, 21, 21, 0.85)
@@ -50,22 +40,26 @@ body
   --color-fondo-reyes: #2E7D32
   --color-texto-reyes: #ffffff
 
+  --color-fondo-resaltado-carta-roja: #e57373
+  --color-fondo-resaltado-carta-negra: #757575
+  --color-fondo-resaltado-dragon-rojo: #e57373
+  --color-fondo-resaltado-dragon-verde: #66BB6A
+  --color-fondo-resaltado-dragon-azul: #29B6F6
+  --color-fondo-resaltado-reyes: #66BB6A
+
   --color-mesa-1: #004D40
   --color-mesa-2: #003027
 
+// Claro
+.tema-claro
+  @include tema-claro
+
+.tema-oscuro
+  @include tema-oscuro
+
+.tema-automatico
+  @include tema-claro
+
 @media (prefers-color-scheme: dark)
   .tema-automatico
-    --color-fondo: #151515
+    @include tema-oscuro
-    --color-texto: #dedede
-    --color-fondo-transparente: rgba(21, 21, 21, 0.85)
-    --color-borde: #c1c1c1
-    --color-texto-carta-roja: #dedede
-    --color-fondo-carta-roja: #b71c1c
-    --color-fondo-dragon-rojo: #b71c1c
-    --color-fondo-dragon-verde: #2E7D32
-    --color-fondo-dragon-azul: #1565C0
-    --color-fondo-reyes: #2E7D32
-    --color-texto-reyes: #ffffff
-
-    --color-mesa-1: #004D40
-    --color-mesa-2: #003027

src/views/Juego/components/pantalla-empate.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-    div.contenedor-pantalla-empate
+div.contenedor-pantalla-empate
-        h1 Empate
+    h1 Empate
-        hr
+    hr
-        router-link(to="/") Ir al inicio
+    router-link(to="/") Ir al inicio
 
-    //
+//
 </template>
 
 <script lang="ts">